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

Question

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

Answer 1

就像你可以读到MenuToggle from Ionic2 docs你可以先创建两个 ion-menu在你的app.html (或者你想定义第二个菜单的地方)

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

请注意 side="left"和 side="right" ion-menu 中的属性元素。稍后我们将使用它来了解应该打开哪个菜单(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>

你可以找到一个working plnuker here .

---

更新:

For testing I simply moved the main from the app.html to a page's html file map.html. I didn't change the sides or ids. But the menu is not appearing when clicking the button (also have been not changed)

我已经在 this plunker 中做到了.现在，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>

请注意 content <ion-content> 中的变量元素。就像你可以阅读 Ionic docs :

To add a menu to an application, the element should be added as a sibling to the content it belongs to. A local variable should be added to the content element and passed to the menu element in the content property. This tells the menu which content it is attached to, so it knows which element to watch for gestures.