如何切换按钮绑定到菜单

Question

为了将切换按钮放在我们使用menuToggle导向器的页面上。但是，如果我想在一个页面中放置两个或三个菜单，我该怎么办？换句话说，按钮的切换如何检测单击时应该打开哪个菜单？

注意：这个问题不描述切换是如何工作的，它只是说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只需创建菜单控制器并打开所选菜单

constructor(public menuCtrl: MenuController) {}
openMenu(menuId: string) {
   this.menuCtrl.open(menuId);
}
closeMenu(menuId: string) {
   this.menuCtrl.close(menuId);
}