Ionic2 Ein Seitenmenü für jeden Tab Öffnen Sie das gleiche Seitenmenü

Question

In meiner ionic2 App möchte ich für jeden Tab ein eigenes Seitenmenü haben. Hier wurde ich versucht. Ich habe ionic start appname tabs --v2 verwendet, um die Basisstruktur zu erstellen.

Dann war meine Idee, sowohl home.html als auch contact.html (erstellt von ionic cli) ein Seitenmenü mit einer Seite zu erstellen. Also änderte ich beide home.html und contact.html auf den Seiten Ordner wie folgt:

<ion-menu [content]="content"> 
    <ion-header> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 1 
     </button> 
     <button menuClose ion-item (click)="openPage(p)"> 
     Page 2 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

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

Ich änderte dann beide TS-Dateien (home.ts und contact.ts) seine eigene Rootpage enthalten, wie unten:

rootPage: any = HomeRootPage; // for home.ts 

und

rootPage: any = ContactRootPage; // for contact.ts 

in meinem HomeRootPage, habe ich die navbar wie unten:

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

und meine ContactRootPage:

<ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

Ich lief ionic serve dann. und ja, ich habe ein sidemenu für jede Registerkarte erstellt !! (Zuhause und Kontakt).

Ich könnte das Sidemenü auf meiner HomeRootPage umschalten, aber das Sidemenu für Kontaktstammseite funktioniert nicht! Anstatt das Kontaktseitenmenü zu öffnen, öffnet es das Home-Seitenmenü. (beide MenüToggle öffnen das gleiche Seitenmenü)

Weiß jemand von euch, warum das passiert ist? Kann ich meinem menuToggle-Befehl mitteilen, um sein eigenes sidemenu umzuschalten?

Vielen Dank für Ihre Hilfe im Voraus. :-)

Answer 1

Kann ich meinem menuToggle-Befehl mitteilen, um sein eigenes sidemenu umzuschalten?

Von Ionic Docs:

ein bestimmtes Menü wechseln durch seine ID oder von der Seite, geben dem menuToggle Wert Richtlinie.

<button ion-button menuToggle="right">Toggle Right Menu</button>

So können Sie versuchen, durch eine id zu jedem Menü wie diese Einstellung:

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

und

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

Und dann in deiner Seite ein:

<ion-navbar> 
    <button ion-button menuToggle="home"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Home Root</ion-title> 
    </ion-navbar> 

Und

<ion-navbar> 
    <button ion-button menuToggle="contact"> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Contact Root</ion-title> 
    </ion-navbar> 

Wenn das nicht richtig funktioniert, oder wenn Sie sehen, dass, wenn Sie das falsche Menü Swipe wird gezeigt, können Sie es auch in dem Komponentencode tun: