<ons-navigator> 标签内未加载

Question

我已经尝试过按钮和列表，但无论出于何种原因，我都无法从选项卡中将页面推送到导航器堆栈。话虽如此，我是温泉的新手，很容易把事情搞砸。我已经按照这些示例进行操作，它们在仅执行选项卡导航或仅执行导航器时工作正常，但不能同时进行。这个问题很相似，但没有解决我的问题：

以下代码无效。任何帮助是极大的赞赏！ login.html 页面位于根 www 文件夹中，我正在使用 Monaca 云 IDE。

<body>
<ons-tabbar position="bottom">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="fa-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="gameon.html">
    <ons-icon icon="fa-bullseye"></ons-icon>
    <span style="font-size: 14px">Game On!</span>
  </ons-tab>
  <ons-tab page="progress.html">
    <ons-icon icon="fa-line-chart"></ons-icon>
    <span style="font-size: 14px">Progress</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="fa-gear"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="gameon.html">
...    
</ons-template>

<ons-template id="progress.html">
...    
</ons-template>

<ons-template id="settings.html">
    <ons-navigator var="navigator">
        <ons-page>            
            <ons-toolbar>
              <div class="center">Settings</div>
            </ons-toolbar>
            <ons-button modifier="large" onclick="navigator.pushPage("login.html", { animation: "slide" });">Login</ons-button>
            <ons-list>
              <ons-list-item onclick="navigator.pushPage('login.html');" modifier="chevron">Login</ons-list-item>
              <ons-list-item>
                    Another Option
                    <ons-switch modifier="list-item" checked></ons-switch>
              </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</ons-template>

更新：所以在查看 Onsen 2.0 的文档之后，我发现对于 ons-navigator，var 属性是针对 angular 的，我特别试图避免使用它，因为我想保持开销尽可能少，坚持直接使用 JS（无框架）。所以这里的文档 https://onsen.io/2/reference/ons-navigator.html 让我感到困惑，因为没有 var 就无法引用对象。因此，看起来，如果您要使用导航器，那么您必须使用 AngularJS，这与同一文档的 JS 参考页面相矛盾，这表明它不需要 Angular，而只是温泉loader.js。这是正确的还是我失去了理智？

更新 2：因此，在实施以下更改后仍然无法正常工作，运行它在我的 phone 上，最后收到一条错误消息。我什至恢复到原始代码并得到相同的错误，即：

Uncaught (in promise) Error: "html" must be one wrapper element. www/lib/onsenui/js/onsenui.js: 4139

我的猜测是，这也与使用和调用外部页面有关。我将尝试将所有内容拉出到独立的 html 页面，然后自己调用模板。谁知道？？？

Answer 1

我发现了问题。在 login.html 页面上，我在 <ons-page> 标签之外设置了 <style> 块。从错误消息中引用的 JS，我能够确定有多个 HTML 包装器被激发。幸运的是，我快速解决了一个愚蠢的问题！

<ons-navigator> 标签内未加载

<ons-navigator> within a tab not loading

angularjs

onsen-ui

monaca