Onsen UI のons-tabとons-navigatorを組み合わせて使いたい

以下のような画面遷移を実現したいと思っています。
タブで画面を大きくわけたい。
例えば、

タブ１（分類１）、タブ２（分類２）、タブ３（分類３）

タブ１（分類１）の中で画面を遷移させたい。
新規作成 -> 確認 -> 登録
タブ２(分類２）の中で画面を遷移させたい。
検索 -> 明細表示
タブ２(分類２）の中で画面を遷移させたい。
一覧表示

この実現のため、
ons-tabbbar と ons-navigator を使って実現可能でしょうか。

以下で実施してみましたが、動かず（事象としては「タブ２」ボタンをクリックしても変化なし）、実現可能な方法をご教示いただけないでしょうか。

index.html

tab1.html
<ons-page id="tab1">
<ons-navigator var="tabNavigator" page="tab1.html"></ons-navigator>
<p style="text-align: center;">
タブ１
</p>
<ons-button onclick="tabNavigator.pushPage('tab2.html')">
タブ２
</ons-button>
</ons-page>

よろしくお願いします。

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

回答2件

自己解決

以下のサイトを参考に自己解決しました。
https://teratail.com/questions/72899

投稿2017/09/07 03:27

asn

総合スコア20

tab2.htmlがないからの気もしますが、

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10
11  <script>
12    ons.ready(function() {
13      console.log("Onsen UI is ready!");
14    });
15</script>
16</head>
17<body>
18<ons-page>
19  <ons-toolbar>
20    <div class="center">Tab 1</div>
21  </ons-toolbar>
22
23  <ons-tabbar position="auto">
24    <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
25    </ons-tab>
26    <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
27    </ons-tab>
28  </ons-tabbar>
29</ons-page>
30
31<!-- ---------------------------------------------------------------------------- -->
32<template id="tab1.html">
33  <ons-page id="Tab1">
34    <ons-navigator id="myNavigator11" page="page11.html"></ons-navigator>
35  </ons-page>
36</template>
37
38<ons-template id="page11.html">
39  <ons-page id="idPage11">
40    <ons-toolbar>
41        <dev class="center">Page11</dev>
42    </ons-toolbar>
43
44    <div class="content" style="text-align: center">
45      <p>This is the 1st page.</p>
46      <ons-button onclick="myNavigator11.pushPage('page12.html',{data:{param1:'aaa'}})">Push page</ons-button>
47    </div>
48  </ons-page>
49</ons-template>
50
51<ons-template id="page12.html">
52  <ons-page id="page12">
53    <ons-toolbar>
54      <div class="left"><ons-back-button>戻る</ons-back-button></div>
55      <div class="center">Page12</div>
56    </ons-toolbar>
57
58    <div class="content" style="text-align: center">
59      <p>This is the second page.</p>
60      <p id="param"></p>
61      <ons-button onclick="myNavigator11.popPage()">Pop page</ons-button>
62    </div>
63  </ons-page>
64</ons-template>
65
66<!-- ---------------------------------------------------------------------------- -->
67<template id="tab2.html">
68  <ons-page id="Tab2">
69    <ons-navigator id="myNavigator21" page="page21.html"></ons-navigator>
70  </ons-page>
71</template>
72
73<ons-template id="page21.html">
74  <ons-page id="idPage21">
75      <ons-toolbar>
76          <dev class="center">Page21</dev>
77      </ons-toolbar>
78
79    <div class="content" style="text-align: center">
80      <p>This is the 1st page.</p>
81      <ons-button onclick="myNavigator21.pushPage('page22.html',{data:{param1:'aaa'}})">Push page</ons-button>
82    </div>
83  </ons-page>
84</ons-template>
85
86<ons-template id="page22.html">
87  <ons-page id="page22">
88    <ons-toolbar>
89      <div class="left"><ons-back-button>戻る</ons-back-button></div>
90      <div class="center">Page22</div>
91    </ons-toolbar>
92
93    <div class="content" style="text-align: center">
94      <p>This is the second page.</p>
95      <p id="param"></p>
96      <ons-button onclick="myNavigator21.popPage()">Pop page</ons-button>
97    </div>
98  </ons-page>
99</ons-template>
100
101</body>
102</html>