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

HomePage

您可以找到working plnuker here。

<强>更新

为了进行测试，我只是将main从app.html移到了 page的html文件map.html。我没有改变侧面或ids。但是单击按钮时没有出现菜单（也没有改变）

我在this plunker完成了这项工作。现在，<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>在该hmtl文件中定义了右边的菜单。

content

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

要向应用程序添加菜单，该元素应该是作为兄弟姐妹添加到它所属的内容中。一个局部变量应该添加到content元素并传递给menu元素在内容属性中。这告诉菜单它是哪个内容附加到，所以它知道要观看手势的元素。

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

1 个答案: