Ionic2：如何在每个子视图中使用不同的离子菜单 [英] Ionic2: How to use an different ion-menu in each child view

问题描述

我正在尝试学习Ionic2侧面菜单的使用，并希望看看我是否可以在每个子视图中使用单独的侧面菜单。

I am trying to learn the use of the Ionic2 side menus and wish to see if I can have a separate side menu in each child view.

我已安装其中一个入门应用程序，在主应用程序中有一个离子菜单，即在引导程序 app.html 文件中我们有

I have installed one of the getting started apps, which has a ion-menu in the main application, ie in the bootstrap app.html file we have

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

 <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>
   </ion-list>
  </ion-content>

</ion-menu>

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

然后我添加了自己的页面，并在初始根页面获取示例应用程序的-started.ts 我添加以下内容以导航到我的新页面..

I have then added my own page, and in the initial root page getting-started.ts of the sample app I add the the following to navigate to my new page..

public goToSideMenuPage(): void{    
   this._navController.push(SideMenuPage);

我还添加了一个按钮来调用上面的处理程序。

I also add a button to call the above handler.

在SideMenuPage中，我希望它有自己完全不同的侧面菜单。我尝试过以下内容...

In the SideMenuPage, I would like it to have it's own completely different side menu. I have tried the following...

<ion-menu [content]="thecontent">
<ion-toolbar>
  <ion-title>Menu title</ion-title>
</ion-toolbar>

<ion-content>
 <ion-list>
    <button>button1</button>
    <button>button2</button>
 </ion-list>
 </ion-content>
</ion-menu>

<ion-content #thecontent>
  <div>Main contents text</div>
 </ion-content>

然而，当我转到我的页面时，我看到的只是主要内容文字位于左上角。我没有看到菜单汉堡图标，如果我向右拖动，我看到应用主菜单设置在 app.html 中，而不是我自己的本地 菜单内容为

However, when I goto my page, all I see is Main contents text in the upper left corner. I don't see the menu hamburger icon, and if I drag to the right, I see the app main menu as set in app.html, and not my own "local" menu with contents of

<button>button1</button>
<button>button2</button>

在doco找到这里，演示确实显示了在运行时交换的侧边菜单，但我无法在任何地方看到它的实际代码。这接近我想要做的事情（虽然我希望它根据我导航到的子页面进行交换），所以看起来确实可能这样做，但我只是不明白我应该怎么做正在这样做。

In doco found here, the demo does show the side menu being swapped at runtime, but I cannot see the actual code for it anywhere. This is close to what I want to do (though I want it to swap when depending on what child page I navigate to), so it does look like it might be possible to do, but I just don't quite see how I should be doing it.

有谁知道这是否可行，如果可行，怎么做？

Does anyone know if this is possible, and if so, how to do it?

推荐答案

您正在寻找的信息位于 MenuController 部分。这可以通过添加 app.html 中的菜单来完成，但是为它们分配如下ID：

The information you're looking for is in the MenuController section from Ionic2 docs. That could be done by adding the menus in the app.html but assigning them an id like this:

<ion-menu [content]="content" side="left" id="menu1">
  <ion-toolbar secondary>
    <ion-title>Menu 1</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu1" detail-none>
        Close Menu 1
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="content" side="right" id="menu2">
  <ion-toolbar danger>
    <ion-title>Menu 2</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item menuClose="menu2" detail-none>
        Close Menu 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

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

然后，在每个页面中，我们可以决定应该激活哪个菜单：

And then, in each page we can decide which menu should be activated like this:

  constructor(private menu: MenuController, private nav: NavController) { }

  ionViewDidEnter() {
    // Use the id to enable/disable the menus
    this.menu.enable(true, 'menu1');
    this.menu.enable(false, 'menu2');
  }

另外，请注意我使用<$ c $显示第二页c> this.nav.setRoot（Page1）; 而不是使用类似 this.nav.push（Page1）; 。

Also, please notice that I show the second page by using this.nav.setRoot(Page1); instead of using something like this.nav.push(Page1);.

编辑：如果您希望两个菜单同时处于活动状态，请查看这个答案。

If you want both menus active at the same time, please take a look at this answer.

编辑2：就像@peterc在评论中说：

EDIT 2: Just like @peterc say in the comments:

我发现这也有效如果我在我的页面
sidemenu-page.html中有我的侧边菜单并设置this.menu.enable（true，'menu1'）;在它的
组件中（所以可以选择让侧面菜单包含将切换到它的页面的
标记）。

我将其添加到答案中，因为将要使用的视图似乎是放置菜单而不是应用程序的更好位置.html 。

I add that to the answer because the view where it's going to be used seems to be a better place to put the menus instead of the app.html.

这篇关于Ionic2：如何在每个子视图中使用不同的离子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！