イオン2 - （ - 左右）

Question

SITUATION同時に複数のメニュー：私のイオン2アプリで私が働いて右のメニューを持って

。私は左のメニューを追加する必要があります。 私は試しましたが、今まで成功していませんでした。

CODE： これは私の試みです

このコードの右のメニューが正常に動作しているが、それは左のメニューに表示されません。

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'); 
    } 

QUESTION：

私は2つのメニューを持つことができますどのように - 左と右 - 同時に適切に働いていますか？

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> 

EDIT：用

おかげ@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"のプロパティがあることに注意してください。