如何從另一側添加第二個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：

要將菜單添加到應用程序，該元素應該是 添加爲兄弟，以它所屬的內容。應將內部變量 添加到內容元素中，並將其傳遞到內容屬性中的菜單元素 。這告訴菜單連接到哪個內容 ，所以它知道要觀看哪個元素的手勢。