離子2 - （ - 左右）

Question

局勢在同一時間多個菜單：

我有一個工作的右鍵菜單在我的離子2應用程序。我需要添加一個左側菜單。 我已經嘗試過，但到目前爲止還沒有成功。 這是我的嘗試：

守則：

這段代碼的右鍵菜單中工作正常，但它不會出現在左邊的菜單。

app.html：

<ion-menu [content]="content" id="menu1"> 

    <ion-header> 
     <ion-toolbar> 
      <ion-title>Pages</ion-title> 
     </ion-toolbar> 
    </ion-header> 

    <ion-content> 
     <ion-list> 
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
       {{p.title}} 
      </button> 
     </ion-list> 
    </ion-content> 

</ion-menu> 


<ion-menu [content]="content" id="menu2"> 

    <ion-header> 
    <ion-toolbar color="danger"> 
     <ion-title>Menu 2</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button ion-item menuClose="menu2" detail-none> 
     Close Menu 2 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

app.component.ts：

constructor(
     public platform: Platform, 
     public menu: MenuController 
    ) { 
     this.initializeApp(); 

     this.pages = [ 
      { title: 'Home', component: HomePage }, 
      { title: 'Login', component: LoginPage }, 
     ]; 

     this.menu.enable(true, 'menu1'); 
     this.menu.enable(true, 'menu2'); 
    } 

問題：

我怎麼能有兩個菜單 - 左，正確 - 同時正確工作？

Answer 1

就像你所看到的here，你需要添加side="left"和side="right"這樣的：

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu> 

而且

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu> 

編輯：

感謝@johnnyfittizio爲你的評論！我已經在那裏提到了所做的更改（如果我忘記了某些內容，請編輯此答案）。

因此，基本上，我們只需要添加兩個菜單（例如，在app.html頁）這樣的：

<ion-menu [content]="content" side="left" id="menu1"> 
    <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-content> 
    <ion-list> 
     <button ion-item menuClose="menu2" detail-none> 
     Close Menu 2 
     </button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 



<ion-nav [root]="rootPage" #content></ion-nav> 

然後我們需要在標題中添加這兩個菜單按鈕這樣的：

<ion-header> 
    <ion-navbar primary> 
    <button ion-button menuToggle="left" start> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     HomePage 
    </ion-title> 
    <button ion-button menuToggle="right" end> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <p>Home page</p> 

</ion-content> 

請注意，每個按鈕都有menuToggle="left"或menuToggle="right"屬性可以切換正確的菜單。