typescript - Ionic 2 - Sidomeny med navigering mellan sidor (bakåtknapp)

Jag är ny på hybridapparutveckling. Först vill jag veta om det är möjligt att ha navigering mellan sidor med en sidomeny i Ionic 2. Jag lyckades implementera navigering mellan sidor som visas i den här handledningen och en meny som visas på ionicdocs-sidan. Men när jag klickar på ett menyval sätter menyn sidan som "rootPage", så jag omdirigeras till den sidan, men om jag vill gå tillbaka till startsidan måste jag göra det genom menyn, jag skulle vilja kunna bara trycka på en tillbaka-knapp.

Tack på förhand, detta är min app.ts-fil:

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

@App({
  template: `
<ion-menu [content]="content">
<ion-toolbar>
    <ion-title>Menu</ion-title>
</ion-toolbar>

<ion-content>
    <ion-list>
        <button ion-item (click)="openPage(categoriesPage)">
            Categorías
        </button>
        <button ion-item>
            Mis Compras
        </button>
        <button ion-item>
            Lista de Deseos
        </button>
        <button ion-item>
            Cerrar Sesión
        </button>
    </ion-list>
</ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;
  public app;
  public menu;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, menu: MenuController) {

      this.app = app;
      this.menu = menu;
      this.categoriesPage = CategoriesPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });

    this.rootPage = HomePage;
  }

  openPage(page){
    this.rootPage = page;
    this.menu.close();
  }
}

REDIGERA: Modifierade app.ts för att använda NavController, men nu laddas inte ens startsidan

import {App, IonicApp, Platform, NavController, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
template: `
<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>

    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(categoriesPage)">
                Categorías
            </button>
            <button ion-item>
                Mis Compras
            </button>
            <button ion-item>
                Lista de Deseos
            </button>
            <button ion-item>
                Cerrar Sesión
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;

  public app;
  public nav;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, nav: NavController) {

      this.app = app;
      this.nav = nav;
      this.categoriesPage = CategoriesPage;

      platform.ready().then(() => {
          StatusBar.styleDefault();
    });

    this.rootPage = HomePage;

  }

  openPage(page){
    this.nav.push(page, {"test": ""});
  }
}

kategorier.html:

<ion-navbar *navbar>  
  <ion-title>
      Categories
  </ion-title>
</ion-navbar>
<ion-content class="categories">  
  <ion-list inset>
      <ion-item>
          <ion-label>Categories</ion-label>
      </ion-item>
  </ion-list>
</ion-content>

Svar #1

Du måste importera sidan du vill öppna:

import {ExamplePage} from 'path/to/page';

och sedan kan du trycka detta på nav (stack):

openPage() {
   this.nav.push(ExamplePage);
}

Svar #2

Tänk på de sidor du navigerar som en hög av sidor

  nav.push(YourPage)

när du använder nav.push(YourPags) - läggs den nya sidan till högst upp i stacken och sedan förblir de tidigare vyerna i stacken själva, vilket gör att du kan använda tillbaka-knappen för att navigera till den tidigare vyn

  nav.setRoot(YourPage)

när du använder nav.setRoot(YourPage) - sätter sidan som den första vyn i stacken och rensar alla andra vyer i stacken

Relaterade artiklar