温泉-ui-回到家

Question

我想在不使用菜单的情况下从 page4.html 回家，但出现此错误

Error: You can not supply no "ons-page" element to "ons-navigator

这是我的代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>Sliding Menu</title>

  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css'>
  <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css'>

</head>

<body onload="_l='t';">

<ons-sliding-menu
  menu-page="menu.html" main-page="home.html" side="left"
  var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page modifier="menu-page">
    <ons-toolbar modifier="transparent"></ons-toolbar>

    <ons-list class="menu-list">
      <ons-list-item class="menu-item" onclick="menu.setMainPage('home.html', {closeMenu: true})">
        <ons-icon icon="fa-plus"></ons-icon>
        Home
      </ons-list-item>      

    </ons-list>

  </ons-page>
</ons-template>



<ons-template id="home.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Home</div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item onclick="myNav.pushPage('page1.html')">
             go to page 1
        </ons-list-item>
         <ons-list-item onclick="myNav.pushPage('page2.html')">
             go to page 2
        </ons-list-item>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page1</div>
    </ons-toolbar>

       <ons-list>
         <ons-list-item onclick="myNav.pushPage('page3.html')">
             Page3
        </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
     <ons-toolbar>
        <div class="left">
        <ons-toolbar-button onclick="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
        <div class="center">Page2</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item onclick="myNav.popPage();">
             back to Home
        </ons-list-item>

    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="page3.html">
  <ons-page>
     <ons-toolbar>
        <div class="left">
        <ons-toolbar-button onclick="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
        <div class="center">Page3</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item onclick="myNav.pushPage('page4.html');">
             go to page 4
        </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="page4.html">
  <ons-page>
     <ons-toolbar>
        <div class="left">
        <ons-toolbar-button onclick="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
        <div class="center">Page4</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item onclick="myNav.pushPage('home.html');">
             back to Home
        </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>




  <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js'></script>
  <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js'></script>

  <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script>

  <script>
    ons.bootstrap();
  </script>

</body>

</html>

你可以试试codepen http://codepen.io/marcocalta/pen/azeozL 谢谢！

Answer 1

它不起作用的原因是您使用 resetToPage() 转到 home.html，这不是 <ons-page> 元素。

解决它的一种方法是从导航器中拉出 <ons-page> 元素并将其放入模板中。如果你将它命名为 page0.html 你可以做 resetToPage('page0.html').

我已经更新了你的 Codepen： http://codepen.io/argelius/pen/XJvWGL

温泉-ui-回到家

Onsen-ui - back to home

onsen-ui