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

发布时间：2020-12-17 07:58:17 所属栏目：安全来源：网络整理

导读：我正在尝试学习Ionic2侧面菜单的使用,并希望看看我是否可以在每个子视图中都有一个单独的侧面菜单. 我安装了一个入门应用程序,它在主应用程序中有一个离子菜单,即在我们的bootstrap app.html文件中 ion-menu [content]="content" ion-toolbar ion-titlePages

我正在尝试学习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>

但是,当我转到我的页面时,我看到的只是左上角的主要内容文本.我没有看到菜单汉堡包图标,如果我向右拖动,我会看到应用程序主菜单在app.html中设置,而不是我自己的“本地”菜单,内容为

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

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

有谁知道这是否可能,如果是的话,怎么做？

您正在寻找的信息位于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);.

编辑：如果您希望两个菜单同时处于活动状态,请查看this answer.

编辑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的更好位置.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!