在 ionic 2 中使用带有侧边菜单的 nav.push [英] Use nav.push with side menu in ionic 2

问题描述

我尝试在 ionic2 中制作一个小应用程序来了解它，但我在导航方面遇到了问题.

I try to make a little app in ionic2 to learn about it but I have a problem with navigation.

事实上我已经很清楚rootpage(改变whit nav.setRoot)和普通"页面(添加nav.push).问题是对于我的应用程序，我需要能够打开一个侧边菜单(如果我在 rootpage 上这是可以的，但对于第二种类型的页面则不行)并且能够返回(使用推送页面可以，但不能使用根页面).

In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).

所以对我来说这种类型的页面应该是推送而不是根页面但是如何在这种类型的页面上重新显示侧边菜单?

So for me this type of page should be push and not a root page but how repear side menu on this type of page?

谢谢.

推荐答案

在您的 ion-menu 项目中使用 persistent="true" 怎么样?就像你在 Ionic2 文档中看到的一样:

What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:

持久菜单持久菜单在菜单中显示 MenuToggle 按钮导航堆栈中所有页面上的 NavBar.使菜单持久化在元素上设置persistent 为true.请注意，这将仅影响附加到菜单的导航栏中的 MenuToggle 按钮设置为 true 时，任何其他 MenuToggle 按钮都不会受到影响.

Persistent Menus Persistent menus display the MenuToggle button in the NavBar on all pages in the navigation stack. To make a menu persistent set persistent to true on the element. Note that this will only affect the MenuToggle button in the NavBar attached to the Menu with persistent set to true, any other MenuToggle buttons will not be affected.

所以你的 app.html 应该是:

<ion-menu [content]="content" persistent="true">

  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
      <button menuClose ion-item (click)="logout()">Logout</button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

这篇关于在 ionic 2 中使用带有侧边菜单的 nav.push的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！