html - Ionic 2 definer meny på sidekomponent i stedet for rotkomponent

Jeg har problemer med å prøve å implementere en enkel meny i mitt Ionic 2-prosjekt. Alle eksemplene jeg har sett på nettet definerer HTML-en for menyen i app.html og har deretter bare en knapp med menuToggle-taggen på siden som bruker menyen.

Her er hva jeg prøver å gjøre. Rot-siden i appen er en slags påloggingsside, kalt HomePage. Denne siden er definert som rootPage i app.ts som vist nedenfor. Etter at brukeren logger inn, blir de ført til SettlementPage-siden. På denne siden skal brukeren kunne åpne en meny som viser en liste over andre bosetninger brukeren kan reise til.

Mitt problem er at jeg trenger å definere menyen og innholdet dens fra innenfor konteksten til SettlementPage, ikke HomePage, som ser ut til å være måten alle eksemplene gjør det på. Jeg er forvirret over hvordan jeg skal gå frem for å gjøre dette, siden det ikke finnes mye dokumentasjon om emnet. Spesifikt er jeg forvirret over hvordan linjen <ion-nav #mycontent [root]="rootPage"></ion-nav> fungerer. Hva binder denne menyen til nøyaktig? I alle eksemplene er rootPage et medlem av rotkomponenten definert i app.ts. Hvordan kan jeg gå frem for å binde en meny til en spesifikk Page-komponent?

En tankegang jeg fulgte var at jeg trengte å binde menyen til ion-content-seksjonen av HTML-en på denne spesifikke siden. Så jeg la til et ID-felt som i <ion-content id="content"> og prøvde deretter å referere til det med <ion-menu [content]="content">, men det så ikke ut til å fungere. Jeg prøvde også å sette this.rootPage=this; i settlement-page.ts, men det fungerte heller ikke.

Jeg tror jeg har en slags grunnleggende misforståelse om hvordan menyer skal bindes til Sider. Er det overhodet mulig å gjøre dette, eller må en meny defineres på rotkomponenten og aksesseres andre steder ved å referere til en slags ID?

Her er den relevante koden fra prosjektet mitt som referanse:

app.ts:

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;
  platform: Platform;

  constructor(platform: Platform) {
    this.platform = platform;
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

oppgjørs-side.html:

<ion-navbar *navbar>
  <button menuToggle side="left">
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
    {{settlement.name}}
  </ion-title>
</ion-navbar>

<ion-menu side="left" [content]="mycontent">
  <ion-toolbar>
    <ion-title>Settlements</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let settlement of settlements" 
                       (click)="travelTo(settlement)">
          {{settlement.name}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content>
  <p>Name: {{player.name}}</p>
  <p>Caps: {{player.caps}}</p>
</ion-content>

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

oppgjørs-side.ts:

import {Page, NavController, NavParams, MenuController} from 'ionic-angular';
import {Player} from '../../providers/classes/player';
import {Settlement} from '../../providers/classes/settlement';
import {SettlementService} from '../../providers/services/settlement-service';
import {SqlService} from '../../providers/services/sql-storage-service';

@Page({
    templateUrl: 'build/pages/settlement-page/settlement-page.html',
    providers: [SqlService, SettlementService]
})
export class SettlementPage {
  private nav: NavController;
  private navParams: NavParams;
  private sqlService: SqlService;
  private settlementService: SettlementService;
  private player: Player;
  private settlement: Settlement;
  private settlements: Settlement[];
  private menu: MenuController;

  constructor(nav: NavController, navParams: NavParams, 
              sqlService: SqlService, settlementService: SettlementService,
              menu: MenuController) {
    this.nav = nav;
    this.navParams = navParams;
    this.sqlService = sqlService;
    this.settlementService = settlementService;
    this.menu = menu;

    this.player = navParams.get('player');
    this.settlement = navParams.get('settlement');
    this.settlements = settlementService.getSettlements();
    //don't allow navigation to current settlement
    this.settlements.filter((value: Settlement) => value != this.settlement);
    console.log(this.menu.getMenus());
  }
}

På den siste linjen returnerer this.menu.getMenus() et tomt array, noe som forteller meg at menyen jeg har definert i settlement-page.html ikke blir gjenkjent. Jeg er ikke sikker på hva jeg gjør galt her.

For øyeblikket vises menyikonet øverst til venstre på navigasjonslinjen, men når jeg klikker på det, glir en tom, gjennomsiktig meny ut fra venstre.

Enhver råd vil bli satt stor pris på. Jeg har sittet fast på dette i noen timer nå, og det ser ikke ut til å finnes noe på nettet om å definere og bruke menyer utenfor appens rotkomponent.

Svar #1

Jeg fulgte svaret til Manu Valdés som nevnt ovenfor, men måtte endre litt for Ionic 2. Det jeg gjorde var:

Legg til på siden der meny ikke er nødvendig:

import { MenuController } from 'ionic-angular';

constructor(public menu:MenuController) {
 ionViewDidLoad() {
    this.menu.enable(false);
  }
  ionViewDidLeave(){
    this.menu.enable(true);
  }
}

Svar #2

Hvis det du til slutt ønsker å gjøre er å først ha en skjerm uten meny, og deretter gå videre til en side med meny aktivert, la alt stå som standard, ikke gjør rare bindinger, og bare deaktiver menyen på startSiden, this.menu.enable(false);

Deretter, på livssyklusmetoden onPageDidLeave på den samme homePage, aktiver menyen på nytt slik at den er tilgjengelig fremover

Relaterte artikler