Question

我想从page4.html回家而不使用菜单，但我收到此错误

错误：您无法在“ons-navigator”
中提供“ons-page”元素

这是我的代码：

<!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

Onsen-ui - 回到家

1 个答案: