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

我如何添加第二个 sidemenu？我在左侧已经有一个正常的 sidemenu，运行良好。现在我想添加一个带有筛选选项的第二个 sidemenu。

答案＃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。

更新：

为了测试，我只是将主内容从 app.html 移动到了某个页面的 HTML 文件 map.html。我没有更改边栏或 ID。但是，当点击按钮时，菜单没有出现（也没有被更改）。

我已经在这个 Plunker 中做过了。现在，HomePage 在那个 HTML 文件中定义了右侧的菜单。

<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>

请注意 content 变量在 <ion-content> 元素中。正如你可以在 Ionic 文档中看到的那样：

要向应用程序添加菜单，应将该元素作为其所属内容的同级元素添加。应将一个本地变量添加到内容元素，并通过内容属性传递给菜单元素。这告诉菜单它附加到哪个内容，从而知道应该监听哪个元素的手势。