Ionic2: So verwenden Sie ein anderes Ion-Menü in jeder Kindansicht

Question

Ich versuche die Verwendung der Ionic2-Seitenmenüs zu lernen und möchte sehen, ob ich in jeder Kindansicht ein separates Seitenmenü haben kann.

Ich habe eine von dem Begleit-Apps installiert, die ein ionen Menü in der Hauptanwendung hat, dh in der Bootstrap app.html Datei haben wir

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

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

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

</ion-menu> 

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

Ich habe dann meine eigene Seite hinzugefügt, und in die anfängliche Stammseite getting-started.ts der Beispielanwendung füge ich die folgende auf meiner neuen Seite zu navigieren ..

public goToSideMenuPage(): void{  
    this._navController.push(SideMenuPage); 

ich füge auch eine Schaltfläche, um die oben Handler aufzurufen.

In der SideMenuPage möchte ich, dass es ein ganz anderes Seitenmenü hat. Ich habe folgende versucht ...

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

<ion-content> 
<ion-list> 
    <button>button1</button> 
    <button>button2</button> 
</ion-list> 
</ion-content> 
</ion-menu> 

<ion-content #thecontent> 
    <div>Main contents text</div> 
</ion-content> 

Allerdings, wenn ich gehe zu meiner Seite, ich sehe Main contents text in der linken oberen Ecke. Ich sehe das Menü Hamburgere Symbol nicht, und wenn ich nach rechts ziehen, ich sehe die App-Hauptmenü, wie in app.html gesetzt, und nicht mein eigenes „lokales“ Menü mit Inhalt

<button>button1</button> 
<button>button2</button> 

In doco gefunden here, zeigt die Demo das Seitenmenü, das zur Laufzeit getauscht wird, aber ich kann nirgendwo den tatsächlichen Code dafür sehen. Das ist nahe an dem, was ich tun möchte (obwohl ich es tauschen möchte, wenn es darauf ankommt, zu welcher Child-Seite ich navigiere), also sieht es so aus, als ob es möglich wäre, aber ich sehe nicht genau, wie ich es sollte mach es.

Weiß jemand, ob das möglich ist, und wenn ja, wie?

Answer 1

Die Informationen, die Sie suchen, finden Sie im Bereich MenuController von Ionic2 docs. Das könnte, indem die Menüs in den app.html getan werden, aber sie eine ID wie diese Zuordnung:

<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> 
</ion-menu> 

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

Und dann, auf jeder Seite können wir entscheiden, welches Menü sollte wie folgt aktiviert werden:

constructor(private menu: MenuController, private nav: NavController) { } 

    ionViewDidEnter() { 
    // Use the id to enable/disable the menus 
    this.menu.enable(true, 'menu1'); 
    this.menu.enable(false, 'menu2'); 
    } 

Bitte beachten Sie auch, dass ich die zweite Seite mit this.nav.setRoot(Page1); anstelle von etwas wie this.nav.push(Page1); zeigen.

---

EDIT: Wenn Sie beiden Menüs aktiv zur gleichen Zeit wollen, einen Blick auf this answer klicke.

---

EDIT 2: Genau wie in den Kommentaren @peterc sagen:

I found this also worked if I had my side menu in my page sidemenu-page.html and set this.menu.enable(true, 'menu1'); in it's component (so there is the option to have the side menu with the markup of the page that will switch to it).

ich hinzufügen, dass auf die Antwort, weil die Ansicht, in der es verwendet werden wird scheint zu einem besseren Ort setzen die zu sein Menüs anstelle der app.html.

Answer 2

gerade das Hinzufügen dieser als Teil der Informationen von @sebaferreras aus Gründen der @ gegeben user623396

Um die Seite im Menü in der aktuellen Ansicht zu haben, hatte ich die folgende ...

<ion-menu [content]="thecontent" id='menu1'> 
     <ion-toolbar> 
     <ion-title>Title</ion-title> 
     </ion-toolbar> 

     <ion-content> 
     <ion-list> 
      <button>button1</button> 
      <button>button2</button>  
     </ion-list> 
     </ion-content> 
    </ion-menu> 

    <ion-navbar *navbar> 
     <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>Getting Started</ion-title> 
    </ion-navbar> 

    <ion-content #thecontent> 
     <div>Some text</div> 
    </ion-content> 

Und dann in der Komponentendatei

import {Component} from '@angular/core'; 
    import {MenuController, NavController} from 'ionic-angular'; 

    // Use the pipe TranslatePipe to use in the markup 
    @Component({ 
     templateUrl: 'build/pages/sidemenu-page/sidemenu-page.html' 
    }) 
    export class SideMenuPage { 
     public rootPage = SideMenuPage; 

     public myVal: string; 

     constructor(private menu: MenuController, private nav: NavController, private tranlate: TranslateService){ 
     } 

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

Hoffentlich ist dies immer noch richtig für die neueste Version von Ionic (es ist eine Weile her, seit ich bei diesem Beispiel ausgesehen habe)