angular - Ionic2: Hvordan bruke en annerledes ion-menu i hver underordnet visning

Jeg prøver å lære bruken av Ionic2 side-menyene og ønsker å se om jeg kan ha en egen side-meny i hver underliggende visning.

Jeg har installert en av begynnerappene, som har en ion-menu i hovedapplikasjonen, det vil si i bootstrap app.html-filen vi har

<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>

Jeg har da lagt til min egen side, og på den opprinnelige rot-siden getting-started.ts i eksempelappen legger jeg til følgende for å navigere til min nye side..

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

Jeg legger også til en knapp for å kalle den ovennevnte håndtereren.

På SideMenuPage vil jeg at den skal ha sin egen, helt forskjellige sidemeny. Jeg har prøvd følgende...

<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>

Men når jeg går til siden min, ser jeg bare Main contents text i øvre venstre hjørne. Jeg ser ikke meny-hamburgerikonet, og hvis jeg drar til høyre, ser jeg appens hovedmeny som satt i app.html, og ikke min egen "lokale" meny med innholdet av

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

I dokumentasjonen som finnes her, viser demoen at side-menyen blir byttet ut under kjøring, men jeg kan ikke se selve koden for det noen steder. Dette er nært det jeg ønsker å gjøre (selv om jeg vil at den skal byttes ut avhengig av hvilken underside jeg navigerer til), så det ser ut som det kan være mulig å gjøre, men jeg ser bare ikke helt hvordan jeg skal gjøre det.

Vet noen om dette er mulig, og i så fall hvordan man gjør det?

Svar #1

Informasjonen du leter etter finnes i MenuController-delen fra Ionic2-dokumentasjonen. Dette kan gjøres ved å legge til menyene i app.html, men tildele dem en id slik:

<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>

Og så, på hver side kan vi avgjøre hvilket meny som skal aktiveres slik:

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

Vær også oppmerksom på at jeg viser den andre siden ved å bruke this.nav.setRoot(Page1); i stedet for å bruke noe som this.nav.push(Page1);.

REDIGER: Hvis du vil ha begge menyene aktive samtidig, vennligst ta en titt på dette svaret.

REDIGER 2: Akkurat som @peterc sier i kommentarene:

Jeg fant at dette også fungerte hvis jeg hadde min sidemeny i siden min sidemenu-page.html og satte this.menu.enable(true, 'menu1'); i dens komponent (så det er mulighet for å ha sidemenyen med markeringen av siden som vil bytte til den).

Jeg legger til det i svaret fordi visningen der det skal brukes virker å være et bedre sted å plassere menyene i stedet for app.html.

Svar #2

Legger bare til dette som en del av informasjonen gitt av @sebaferreras for @user623396 sin skyld

For å ha sidemenyen i den faktiske visningen, hadde jeg følgende...

    <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>

Og deretter i komponentfilen

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

Forhåpentligvis er dette fortsatt korrekt for den nyeste versjonen av Ionic (det er en stund siden jeg har sett på dette eksemplet)

Relaterte artikler