Question

要将切换按钮设置到页面，我们使用menuToggle导演。但是如果我想在页面中放两三个菜单，我该怎么办？换句话说，如何切换按钮会检测单击时应打开哪个菜单？

注意：此question未说明切换的工作原理，只是说明了menuToggle="right"或menuToggle="left"。但如果我左边有两个菜单，我应该编写什么代码来一起绑定按钮和菜单？

菜单1：

<ion-nav #mycontent [root]="rootPage"></ion-nav>
  <button ion-button menuToggle="left">Toggle Menu</button>

  <ion-menu [content]="mycontent">
    <ion-content>
      <ion-list>
        <p>some menu content</p>
      </ion-list>
      <ion-list>
        <ion-item menuClose detail-none>Close Menu</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

菜单2：

  <button ion-button menuToggle="left">Toggle Menu2</button>

  <ion-menu [content]="mycontent" side="right">
    <ion-content>
      <ion-list>
        <p>some menu content 2</p>
      </ion-list>
      <ion-list>
        <ion-item menuClose detail-none>Close Menu2</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

菜单3：

  <button ion-button menuToggle="right">Toggle Menu2</button>

  <ion-menu [content]="mycontent" side="right">
    <ion-content>
      <ion-list>
        <p>some menu content 3</p>
      </ion-list>
      <ion-list>
        <ion-item menuClose detail-none>Close Menu2</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

Answer 1

首先尝试将id绑定到像这样的切换选项

<ion-menu id="menu1">和<button menuToggle="menu1">或<button menuOpen="menu1">

如果不起作用，请使用MenuController（https://ionicframework.com/docs/api/components/menu/MenuController/）

使用以下解决方法

如果您有2个带有ID

的菜单

<ion-menu id="menu1">和<ion-menu id="menu2">然后您可以创建一个按钮

<button (click)="openMenu('menu1')">Open menu 1</button>

在ts中，只需创建menuController并打开所选菜单

即可

constructor(public menuCtrl: MenuController) {}

openMenu(menuId: string) {
   this.menuCtrl.open(menuId);
}

closeMenu(menuId: string) {
   this.menuCtrl.close(menuId);
}

如何切换按钮绑定到菜单？

1 个答案: