ons-navigator 一页模板中的多个导航器

Posted 2023-03-05

【中文标题】ons-navigator 一页模板中的多个导航器

【英文标题】：ons-navigator Multiple Navigator in one page template

【发布时间】：2015-07-03 21:46:10

【问题描述】：

我正在尝试从 Onsen UI 框架创建一个应用程序。我正在使用多个导航器。在第一页（模板）中，它工作正常。对于其他页面，它会给出一定的错误。

这是我点击我的谷歌浏览器控制台Error: You can not supply no "ons-page" element to "ons-navigator".时遇到的错误

这是我的页面模板的样子：

<!-- This one works fine -->
  <ons-template id="directory.html">
    <ons-navigator var="app.navi">
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="center">Directory List</div>
      </ons-toolbar>
      <ons-list>

          <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
            <ons-row ng-click="setCurrentCategory(PostCategory.slug);  app.navi.pushPage('directory-page.html',  animation : 'slide'  )">
              <ons-col>
                <div class="name">
                  PostCategory.title
                </div>
              </ons-col>
              <ons-col ></ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>
    </ons-page>
    </ons-navigator>
  </ons-template>


<!-- This one Gives the error while is use the same method above template it worked-->

  <ons-template id="directory-page.html">
    <ons-navigator var="app.navi" >
    <ons-page ng-controller="directoryCategoryListing">
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">CurrentCategory</div>
      </ons-toolbar>

      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); app.navi.pushPage('listing-details.html',  animation : 'slide'  )">
            <ons-col >
              <img src="PostDetail.attachments[0].images.square1.url" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                PostDetail.title
              </div>

              <div class="desc">
                PostDetail.excerpt | htmlToPlaintext
              </div>
            </ons-col>
            <ons-col ></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
   </ons-navigator>
  </ons-template>


<!-- Here is want to reach -->

 <ons-template id="listing-details.html">
    <ons-page ng-controller="ListingDetailsCtrl" modifier="listing-details">
        <ons-toolbar modifier="transparent">
          <div class="right">
            <ons-toolbar-button><ons-icon icon="ion-ios-chatboxes" style="color: white"></ons-icon></ons-toolbar-button>
          </div>
        </ons-toolbar>
    </ons-page>
 </ons-template>

在同一页面中不能使用多个导航器吗？

我尝试使用以下方法解决相同的问题，但它有所帮助，但它从导航页面中取消了 ons-back-button。

<ons-template id="directory-page.html">
    <ons-page ng-controller="directoryCategoryListing">
      <ons-navigator var="CategoryNavi" >
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">CurrentCategory</div>
      </ons-toolbar>    
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); CategoryNavi.pushPage('listing-details.html',  animation : 'slide'  )">
            <ons-col >
              <img ng-src="PostDetail.attachments[0].images.square1.url" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img ng-src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                PostDetail.title
              </div>
            </ons-col>
            <ons-col ></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
     </ons-navigator>
    </ons-page>
  </ons-template>

我只是把标签放在<ons-page> 里面，它的工作很棒，但似乎<ons-back-button>Back</ons-back-button> 在那之后就不行了。

任何其他方式。

【参考方案1】：

您是否尝试过更改第二个导航器的关联变量名称？

<ons-navigator var="app.navi" >

变量可能存在冲突。

【参考方案2】：

您是否出于任何特定原因使用多个导航器？我认为您想要做的事情只有一个导航器就足够了。将一个导航器放入父元素（此代码中的“directory.html”）并将其从其余元素中删除。您从“directory.html”调用的页面也可以访问该导航器，因此无需创建新的。此外，ons-navigator 内部应该始终有一个ons-page，所以不要删除它，否则你会看到Error: You can not supply no "ons-page" element to "ons-navigator"。 您可以将ons-navigator 视为一个“框架”，其内容为ons-pages，根据您推送/弹出的内容而变化。框架内不需要框架，对吗？

希望对你有帮助！

【讨论】：

你好，是的，我需要一个框架内的框架。喜欢目录 > 类别 > 类别明智的列表 > 列表详细信息。所以我使用了多个 ons-navigator。我如何使用其中一个并在其余部分中使用？你能指导我吗？

是的，我明白了。它就像魅力一样...... :) 我很高兴 :) 非常感谢！你拯救了我的一天！