切換按鈕如何綁定到菜單？

要將切換按鈕放到頁面上，我們使用menuToggle導演。但是如果我想在頁面中放置兩個或三個菜單，我該怎麼辦？換句話說，按鈕的切換如何檢測點擊時應該打開哪個菜單？切換按鈕如何綁定到菜單？

注意：這question不描述切換如何工作，它只是說約menuToggle="right"或menuToggle="left"。但是如果我左邊有兩個菜單，我應該怎樣編寫代碼來將按鈕和菜單綁定在一起？

菜單1：

<ion-nav #mycontent [root]="rootPage"></ion-nav> 
    <button ion-button menuToggle="left">Toggle Menu</button> 

    <ion-menu [content]="mycontent"> 
    <ion-content> 
     <ion-list> 
     <p>some menu content</p> 
     </ion-list> 
     <ion-list> 
     <ion-item menuClose detail-none>Close Menu</ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-menu>

菜單2：

<button ion-button menuToggle="left">Toggle Menu2</button> 

    <ion-menu [content]="mycontent" side="right"> 
    <ion-content> 
     <ion-list> 
     <p>some menu content 2</p> 
     </ion-list> 
     <ion-list> 
     <ion-item menuClose detail-none>Close Menu2</ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-menu>

菜單3：

<button ion-button menuToggle="right">Toggle Menu2</button> 

    <ion-menu [content]="mycontent" side="right"> 
    <ion-content> 
     <ion-list> 
     <p>some menu content 3</p> 
     </ion-list> 
     <ion-list> 
     <ion-item menuClose detail-none>Close Menu2</ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-menu>

來源

2017-04-09 Siamak Ferdos

的可能的複製[離子2 - 在同一時間多個菜單（右 - 左）]（http://stackoverflow.com/questions/40802202/ionic-2-multiple-menu-at-the-the-time-right-left） –

@suraj這只是一個例子。我想知道ionic2中的菜單機制，以製作複雜的菜單。例如，如果我有兩個菜單在左邊，一個在右邊我應該怎麼做？ –

'menuToggle =「menuId」'或'menuOpen =「menuId'工作嗎？沒有時間檢查atm – Ivaro18

第一次嘗試的ID綁定到一個切換選項，像這樣

<ion-menu id="menu1">和<button menuToggle="menu1"> OR <button menuOpen="menu1">

如果不工作，你使用使用MenuController（https://ionicframework.com/docs/api/components/menu/MenuController/）

以下解決方法。如果你有一個ID的

<ion-menu id="menu1"> 2菜單的和<ion-menu id="menu2">你就可以讓一個按鈕

<button (click)="openMenu('menu1')">Open menu 1</button>

而在你的ts您只需建立menuController並打開所選菜單

constructor(public menuCtrl: MenuController) {} 

openMenu(menuId: string) { 
    this.menuCtrl.open(menuId); 
} 

closeMenu(menuId: string) { 
    this.menuCtrl.close(menuId); 
}

來源

2017-04-10 09:28:19 Ivaro18

切換按鈕如何綁定到菜單？

回答

相關問題