在 Ionic 2 中在页面之间导航和传递数据

在 Ionic 中你会得到一个名为导航控制器在页面之间导航，以及一个名为导航参数从您导航的页面获取数据。

首先导入导航控制器以及您将在起始组件/页面中导航到的页面的类别：

组件：something.ts

import { NavController } from 'ionic-angular';
import { SomethingElsePage }
     from '../something-else/something-else';

然后你注射导航控制器在组件的类构造函数中：

组件：something.ts

constructor(public navCtrl: NavController) {}

现在假设您的页面模板有一个这样的按钮：

模板：something.html

<button ion-button (click)="goToSomethingElse()">

那么你的组件将有一个转到其他位置（）像这样的方法：

组件：something.ts

goToSomethingElse() {
    this.navCtrl.push(SomethingElsePage);
}

在 SomethingElsePage 组件中，你可以使用 NavController 的流行音乐返回上一个视图：

组件：something-else.ts

goBack() {
    this.navCtrl.pop();
}

使用 NavParams 传递和获取数据

上面的方法都很好，但很多时候我们想要将数据传递到我们要导航到的页面。只需将其作为 JSON 对象传递给推调用。在下面的示例代码中，有效载荷是我们传递的 JSON 对象：

组件：something.ts

goToSomethingElse(payload) {
    this.navCtrl.push(SomethingElsePage, payload);
}

现在，在您的目标组件/页面中，您还需要导入和注入导航参数：

组件：something-else.ts

import { NavController, NavParams } from 'ionic-angular';

...

现在，你终于可以使用 NavParams 访问数据了。得到方法。例如，假设我们的有效载荷 JSON 对象作为番茄酱密钥以及您想要的数据：

组件：something-else.ts

ketchup: string = this.navParams.get('ketchup');