ons-nabigator内ons-tabbarの指定のタブを開いた状態にpushPageしたい

初心者です。何卒ご教示お願いします。

OnsenUIで、
tabbarのない画面から
ons-tabbarのactiveでないtabをactiveにした状態の画面に遷移させる方法が分からず詰まっております。

以下で状況記載します。

index

  <ons-navigator id="navigator" page="tabbar"></ons-navigator>

tabbar

<ons-page id="tabbar">
  <ons-tabbar>
    <ons-tab [page="page1" active]></ons-tab>
    <ons-tab page="page2"></ons-tab> // tabのある+activeの状態のpage2に遷移させたいのですが

飛びたい元ページ

<ons-page id="wantToPushPage">
  <a onclick="document.querySelector('#navigator').pushPage('page2')">toPAGE2</a>
    〜〜〜
  // これだとpage2だけでtabbarが表示されないので困ってます

page1&2

<ons-page id="page1または2">
  〜〜〜内容〜〜〜
</ons-page>

onclickの中身を

  <a onclick="document.querySelector('#navigator').pushPage('tabbar')">

にして、page2をactiveにする指定を入れてあげればいけるか？
と思ったのですが、その書き方もよく分からず。。
tabbarのslim自体にactiveを書いてしまっているのでダメでしょうか・・

解決方法ご存知の方、ぜひ教えていただけると嬉しいです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

slim記載がよくわからずタブバーがないページからタブバーのページに移動した際の挙動でのことと思い試してみました。
resetToPageではできなかったけどpushPageではできたので完全ではないかもしれませんが、載せておきます。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <meta http-equiv="X-UA-Compatible" content="ie=edge">
10    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
11    <title>Document</title>
12</head>
13<body>
14
15<ons-navigator swipeable id="navigator" page="home.html"></ons-navigator>
16
17<template id="home.html">
18  <ons-page>
19    <a href="#" onclick="aClick(0);">リンク(tab1をアクティブ)</a>
20    <br />
21    <a href="#" onclick="aClick(1);">リンク(tab2をアクティブ)</a>
22  </ons-page>
23</template>
24
25<template id="tabbar.html">
26  <ons-page>
27    <ons-toolbar>
28      <div class="center">Tab 1</div>
29    </ons-toolbar>
30
31    <ons-tabbar swipeable position="auto">
32      <ons-tab page="page1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
33      </ons-tab>
34      <ons-tab page="page2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
35      </ons-tab>
36    </ons-tabbar>
37  </ons-page>
38</template>
39
40<template id="page1.html">
41  <ons-page>
42    page1
43  </ons-page>
44</template>
45
46<template id="page2.html">
47  <ons-page>
48    page2
49  </ons-page>
50</template>
51
52
53</body>
54<script>
55  function aClick(tabIndex) {
56    document.querySelector('#navigator')
57    .pushPage('tabbar.html')
58    .then(function() {
59      document.querySelector('ons-tabbar').setActiveTab(tabIndex);
60    });
61  }
62  
63  document.addEventListener('init', function(event) {
64    console.log(event);
65    var page = event.target;
66  });
67</script>
68</html>