Ionic2：如何在每个子视图中使用不同的离子菜单

Question

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

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

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

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

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

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

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

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

但是，当我转到我的页面时，我只看到左上角的 Main contents text。我没有看到菜单汉堡图标，如果我向右拖动，我会看到 app.html 中设置的应用程序主菜单，而不是我自己的 "local" 菜单，内容为

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

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

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

Answer 1

您要查找的信息位于 Ionic2 文档的 MenuController 部分。这可以通过在 app.html 中添加菜单但为它们分配一个 id 来完成，如下所示：

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

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

  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');
  }

此外，请注意我使用 this.nav.setRoot(Page1); 显示第二页，而不是使用 this.nav.push(Page1);.

之类的东西

编辑：如果您希望同时激活两个菜单，请查看。

编辑 2：就像@peterc 在评论中所说的那样：

I found this also worked if I had my side menu in my page sidemenu-page.html and set this.menu.enable(true, 'menu1'); in it's component (so there is the option to have the side menu with the markup of the page that will switch to it).

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

Answer 2

为了@user623396

，只是将此添加为@sebaferreras 提供的信息的一部分

要在实际视图中显示侧边菜单，我有以下...

    <ion-menu [content]="thecontent" id='menu1'>
      <ion-toolbar>
        <ion-title>Title</ion-title>
      </ion-toolbar>

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

    <ion-navbar *navbar>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Getting Started</ion-title>
    </ion-navbar>

    <ion-content #thecontent>
      <div>Some text</div>  
    </ion-content>

然后在组件文件中

    import {Component} from '@angular/core';
    import {MenuController, NavController} from 'ionic-angular';

    // Use the pipe TranslatePipe to use in the markup
    @Component({
      templateUrl: 'build/pages/sidemenu-page/sidemenu-page.html'
    })
    export class SideMenuPage {
      public rootPage = SideMenuPage;

      public myVal: string;  

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

      ionViewDidEnter() {
        this.menu.enable(true, 'menu1');
      }  
    }

希望这对于最新版本的 Ionic 仍然是正确的（我已经有一段时间没看过这个例子了）

Ionic2：如何在每个子视图中使用不同的离子菜单

Ionic2: How to use an different ion-menu in each child view

angular

typescript

ionic-framework

ionic2

ionic3