Question

我是混合应用程序开发的新手。首先，我想知道是否可以使用Ionic 2中的侧边菜单在页面之间进行导航。我能够实现页面之间的导航，如this tutorial所示，以及ionicdocs site中显示的菜单。但是当我点击一个菜单项时，菜单将页面设置为“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

您必须导入您想要打开的页面：

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

然后你可以将其推送到导航（堆栈）：

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

Answer 2

考虑您作为一叠页面导航的页面

  nav.push(YourPage)

当你使用nav.push（YourPags）时 - 新页面被添加到堆栈的顶部，然后先前的视图保留在堆栈本身，使您可以使用后退按钮导航到上一个视图

  nav.setRoot(YourPage)

使用nav.setRoot（YourPage）时 - 将页面设置为堆栈中的第一个视图并清除堆栈中的所有其他视图

Answer 3

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

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

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

Answer 4

该帖子是another answer我给出的副本，可以帮助您导航，从一个视图向另一个视图发送和接收数据（因为您很快就会遇到这个问题）：

首先，发送数据：

import { YourPage } from '../yourpage/yourpage';

@Component({
  template: `<button [navPush]="pushPage [navParams]="params">Go</button>`
})
class MyPage {
  constructor(){
    this.pushPage = YourPage;
    this.params = { id: 42 };
  }
}

模板的内容可以写在由templateUrl参数链接的html文件中。该代码允许您使用以下数据从MyPage转到YourPage：{ id: 42 }。

更多信息：http://ionicframework.com/docs/v2/api/components/nav/NavPush/

第二，接收数据

 constructor(public params: NavParams){
   // userParams is an object we have in our nav-parameters
   this.params.get('userParams');
 }

更多信息：http://ionicframework.com/docs/v2/api/components/nav/NavParams/

Ionic 2 - 侧面菜单，页面之间有导航（后退按钮）

4 个答案: