在 ionic 中，页面跳转一般有两种形式 ModalController 和 NavController。接下来分别介绍一下这两种跳转如何正向传值和反向传值。
ModalController
ModalController 通常用于选择或编辑某项目。它不可以被重复使用，并且当他dismiss后会被彻底销毁。
正向传值
首先在第一个页面引入 ModalController
import { ModalController } from 'ionic-angular';
constructor(public modalCtrl: ModalController) {}
然后在跳转页面的地方使用以下方法
let data: Object = {
username: '张三'
};
let profileModal = this.modalCtrl.create(ModPage, data);
profileModal.present();
来到第二个页面。引入 NavParams 和 ViewController
import { NavParams, ViewController } from 'ionic-angular';
constructor(public navParams: NavParams,
public viewCtrl: ViewController) {}
接下来使用 NavParams 获取上一个页面传递的值。成功的话应该可以在页面上看到用户名：张三
ionViewDidLoad() {
let modelData: string = '用户名：' + this.navParams.get('username');
console.log(modelData);
}
在需要关闭页面时，调用以下方法即可
this.viewCtrl.dismiss();
反向传值
ModalController 实现反向传值比较简单，首先改造一下 第二个页面的 dismiss() 方法
let data: Object = { info: '返回的消息' };
this.viewCtrl.dismiss(data);
然后再修改一下第一个页面的 create() 方法即可，成功的话可以看到控制台输出返回的消息
let data: Object = {
username: '张三'
};
let profileModal = this.modalCtrl.create(ModPage, data);
profileModal.onDidDismiss(data => {
console.log(data.info);
});
profileModal.present();
NavController
NavController 是最基本的页面跳转方式。基本的使用方法就是通过push进入新的页面，pop回到上一个页面。我们push的时候，堆栈中就加入了一个新的界面，pop的时候会把最后的一个页面移除以返回上一个页面。
正向传值
首先在第一个页面引入 NavController
import { NavController } from 'ionic-angular';
constructor(public navCtrl: NavController) {}
然后在跳转页面的地方使用以下方法
let data: Object = {
username: '张三'
};
this.navCtrl.push(NavPage, data);
来到第二个页面。引入 NavParams 和 NavController
import { NavParams } from 'ionic-angular';
constructor(public navParams: NavParams) {}
与 ModalController 一样，使用 NavParams 获取上一个页面传递的值。成功的话应该可以在页面上看到用户名：张三
ionViewDidLoad() {
let modelData: string = '用户名：' + this.navParams.get('username');
console.log(modelData);
}
在需要关闭页面时，不需要做更多操作。因为这种方法跳转的页面，ionic 会自动在左上角生成返回按钮。如果需要自己控制返回，使用以下方法即可
this.navCtrl.pop();
反向传值
按照产品设计来讲，需要反向传值一般会使用 ModalController。所以 NavController 并没有提供可以直接使用的方法，需要我们自己实现。实现方法有很多，这里我简单介绍一种
首先来到第一个页面，将跳转的方法进行以下修改
let data: Object = {
username: '张三',
callback: data => {
console.log(data.info);
}
};
this.navCtrl.push(NavPage, data);
然后来到第一个页面，手动制作一个返回按钮，并使用以下方法作为 click 事件
popData() {
let callback = this.navParams.get('callback');
let data: Object = {
info: '返回的消息'
};
callback(data);
this.navCtrl.pop();
}
成功的话可以看到控制台输出返回的消息
