【ons-tabbar】Onsen UI v1にある「loadPage」をv2で使う方法（代わるやり方）

Question

ons-tabbarについて、Onsen UI v1にある「loadPage」をv2で使う方法を探しています。

tab.setActiveTab(1)

は正常に動作することが確認できたのですが、タブに表示している以外のページにタブを残したまま移動する方法を探しています。
OnsenUI v1では

tab.loadPage("hogehoge.html")
```でできていたようですがv2ではリファレンスから該当のファンクションが無くなっていました。

タブは並列切り替え、ナビゲーターは階層切り替えと考えた場合、ナビゲーターの導入も考慮したのですが、実際

ページA
タブ
　-　タブ1
　-　タブ2
　-　タブ3

とあったときに、タブ1に
　リンクA　→　タブ2へ
　リンクB　→　別ページB
　リンクC　→　別ページC
というリンクボタンがそれぞれ置かれていた場合に、別ページBと別ページCに行く方法を知りたいのです。
このときタブは残したままにしたいです。

どなたかご存じの方がいらっしゃいましたらご教授いただけますと幸いです。

Answer 1

Onsen UI V1とV2では仕様が違いますので、ons-tabbarを使用せず、ons-navigatorのresetToPage()を使用して切り替えれば、V1に近い動きになります。
また、一つのons-navigatorでタブバーの切り替えとページ遷移を行うことができます。

掲載したコードの注意点としては、
0. CSSコンポーネントを使用しているので、Androidの場合はタブバーをmaterialに切り替える。
0. page__contentクラスの高さは、タブバーの高さを引いた値を設定する。
0. スワイプによるタブの切り替えができない。

などがあります。

アプリ起動時に、ons-tabのpage属性に設定したページを同時に読み込む必要がないので、この方法を採用しています。

<ons-navigator id="mynavigator" page="page1.html"></ons-navigator>
<div class="tabbar">
  <label class="tabbar__item">
    <input type="radio" name="tabbar-c" checked="checked">
    <button class="tabbar__button">
      <div class="tabbar__label">tab 1</div>
    </button>
  </label>
  <label class="tabbar__item">
    <input type="radio" name="tabbar-c">
    <button class="tabbar__button">
      <div class="tabbar__label">tab 2</div>
    </button>
  </label>
  <label class="tabbar__item">
    <input type="radio" name="tabbar-c">
    <button class="tabbar__button">
      <div class="tabbar__label">tab 3</div>
    </button>
  </label>
</div>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">page 1</div>
    </ons-toolbar>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.querySelectorAll('.tabbar__item input')[1].click()">tab 2</ons-button>
    </p>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.getElementById('mynavigator').pushPage('pageb.html', { animation: 'slide' })">page B</ons-button>
    </p>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button>
    </p>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="center">page 2</div>
    </ons-toolbar>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.getElementById('mynavigator').pushPage('pageb.html', { animation: 'slide' })">page B</ons-button>
    </p>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button>
    </p>
  </ons-page>
</template>

<template id="page3.html">
  <ons-page id="page3">
    <ons-toolbar>
      <div class="center">page 3</div>
    </ons-toolbar>
  </ons-page>
</template>

<template id="pageb.html">
  <ons-page id="pageb">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>戻る</ons-back-button>
      </div>
      <div class="center">page B</div>
    </ons-toolbar>
    <p style="padding-top: 20px; text-align: center;">
      <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button>
    </p>
  </ons-page>
</template>

<template id="pagec.html">
  <ons-page id="pagec">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>戻る</ons-back-button>
      </div>
      <div class="center">page C</div>
    </ons-toolbar>
  </ons-page>
</template>

.tabbar {
  z-index: 2;
}

"use strict";
ons.ready(function () {
  var tabbar = document.querySelectorAll(".tabbar__item input");
  tabbar[0].onclick = function () {
    document.getElementById("mynavigator").resetToPage("page1.html", { animation: "slide" });
  };
  tabbar[1].onclick = function () {
    document.getElementById("mynavigator").resetToPage("page2.html", { animation: "slide" });
  };
  tabbar[2].onclick = function () {
    document.getElementById("mynavigator").resetToPage("page3.html", { animation: "slide" });
  };
});