如何从另一侧添加第二个侧菜单

Question

如何添加第二个sidemenu？我左边有一个正常的sidemenu，效果很好。现在，我想添加第二个具有过滤器选项的sidemenu。

Answer 1

就像您可以从Ionic2文档中阅读MenuToggle一样，您可以通过首先在app.html（或您想要定义第二个菜单的位置）中创建两个ion-menu来实现这一点

<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元素中的side="left"和side="right"属性。稍后我们将使用它来了解应该打开哪个菜单（id属性也可以以相同的方式使用）。

然后，在您的页面中，通过为每个menuToggle分配我们之前定义的side属性（或者id，如果您愿意的话），添加应该打开的菜单。

<ion-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>

你可以在这里找到一个工作的plnuker。

---

更新：

为了进行测试，我只需将main从app.html移到页面的html文件map.html。我没有更改侧面或id。但是单击按钮时菜单不显示（也没有更改）

我已经在这个灌篮器里做到了。现在，HomePage在右侧的hmtl文件中定义了菜单。

<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-header>
  <ion-navbar primary>
    <button menuToggle="left" start>
      <ion-icon name="menu">L</ion-icon>
    </button>
    <button menuToggle="right" end>
      <ion-icon name="menu">R</ion-icon>
    </button>
    <ion-title>
      Multiple Menus in Ionic2
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content #content padding>
</ion-content>

请注意<ion-content>元素中的content变量。就像你可以在Ionic文档中阅读的那样：

要向应用程序添加菜单，元素应为作为同级添加到它所属的内容中。本地变量应添加到内容元素并传递到菜单元素在content属性中。这个告诉菜单它是什么内容连接到，所以它知道要注意哪个元素的手势。