Ionic 2 - 侧面菜单,页面之间有导航(后退按钮)

Question

我是混合应用程序开发的新手.首先,我想知道是否可以使用Ionic 2中的侧面菜单在页面之间进行导航.我能够实现本教程中显示的页面之间的导航以及ionicdocs站点中显示的菜单.但是当我点击一个菜单项时,菜单将页面设置为"rootPage",所以我被重定向到那个页面,但是如果我想回到主页我必须通过菜单这样做,我会喜欢只按一个后退按钮.

在此先感谢,这是我的app.ts文件:

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

编辑:修改app.ts使用NavController,但现在它甚至没有加载主页

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": ""});
  }
}

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

Answer 1

您想使用 NavController 进行导航http://ionicframework.com/docs/v2/api/components/nav/NavController/。只需通过构造函数将其注入到您的页面中，然后更改您的 openPage 函数：

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

将导航视为堆栈。您将页面推入堆栈，然后会出现一个后退按钮，让您将页面从堆栈中弹出。请记住，为了显示后退按钮，您必须在导航到的页面中使用ion-navbar标签。