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

【问题标题】：How toggle button bind to menus?如何切换按钮绑定到菜单？
【发布时间】：2017-09-04 09:02:57
【问题描述】：

为了给页面添加一个切换按钮，我们使用menuToggle director。但是如果我想在一个页面中放置两个或三个菜单，我应该怎么做呢？换句话说，按钮的切换如何检测点击时应该打开哪个菜单？

注意：这个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>

【问题讨论】：

Ionic 2 - Multiple menu at the same time (right - left)的可能重复
@suraj 这只是一个例子。我想知道 ionic2 中菜单的机制来制作复杂的菜单。例如，如果我在左侧有 2 个菜单，在右侧有 1 个菜单，我应该如何制作它？
menuToggle="menuId" 或 menuOpen="menuId 有效吗？没时间查atm
@Ivaro18 是的......他们工作......但如何？我不知道:)
如果是这种情况，只需将id 值绑定到您的<ion-menu> 并在按钮中传递它

标签： cordova angular ionic2

【解决方案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);
}

【讨论】：