如何从另一侧添加第二个sidemenu

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

然后，在你的页面，添加到菜单应（如果你愿意这样做或id）分配给它，我们前面定义的side属性打开每个menuToggle。

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

---

UPDATE：

为了测试我干脆搬到从app.html主要为 页面的HTML文件map.html。我没有改变双方或ids。但点击按钮时 菜单没有出现（也已经没有 改变）

我已经做了，在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> 

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

要将菜单添加到应用程序，该元素应该是 添加为兄弟，以它所属的内容。应将内部变量 添加到内容元素中，并将其传递到内容属性中的菜单元素 。这告诉菜单连接到哪个内容 ，所以它知道要观看哪个元素的手势。