在 ionic 中，頁面跳轉(zhuǎn)一般有兩種形式 ModalController 和 NavController。接下來分別介紹一下這兩種跳轉(zhuǎn)如何正向傳值和反向傳值。

ModalController

ModalController 通常用于選擇或編輯某項目。它不可以被重復(fù)使用，并且當(dāng)他dismiss后會被徹底銷毀。

正向傳值

首先在第一個頁面引入 ModalController

import { ModalController } from 'ionic-angular';

constructor(public modalCtrl: ModalController) {}

然后在跳轉(zhuǎn)頁面的地方使用以下方法

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 獲取上一個頁面?zhèn)鬟f的值。成功的話應(yīng)該可以在頁面上看到用戶名：張三

ionViewDidLoad() {
  let modelData: string = '用戶名：' + this.navParams.get('username');
  console.log(modelData);
}

在需要關(guān)閉頁面時，調(diào)用以下方法即可

this.viewCtrl.dismiss();

反向傳值

ModalController 實現(xiàn)反向傳值比較簡單，首先改造一下 第二個頁面的 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 是最基本的頁面跳轉(zhuǎn)方式。基本的使用方法就是通過push進(jìn)入新的頁面，pop回到上一個頁面。我們push的時候，堆棧中就加入了一個新的界面，pop的時候會把最后的一個頁面移除以返回上一個頁面。

正向傳值

首先在第一個頁面引入 NavController

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) {}

然后在跳轉(zhuǎn)頁面的地方使用以下方法

let data: Object = {
  username: '張三'
};
this.navCtrl.push(NavPage, data);

來到第二個頁面。引入 NavParams 和 NavController

import { NavParams } from 'ionic-angular';

constructor(public navParams: NavParams) {}

與 ModalController 一樣，使用 NavParams 獲取上一個頁面?zhèn)鬟f的值。成功的話應(yīng)該可以在頁面上看到用戶名：張三

ionViewDidLoad() {
  let modelData: string = '用戶名：' + this.navParams.get('username');
  console.log(modelData);
}

在需要關(guān)閉頁面時，不需要做更多操作。因為這種方法跳轉(zhuǎn)的頁面，ionic 會自動在左上角生成返回按鈕。如果需要自己控制返回，使用以下方法即可

this.navCtrl.pop();

反向傳值

按照產(chǎn)品設(shè)計來講，需要反向傳值一般會使用 ModalController。所以 NavController 并沒有提供可以直接使用的方法，需要我們自己實現(xiàn)。實現(xiàn)方法有很多，這里我簡單介紹一種

首先來到第一個頁面，將跳轉(zhuǎn)的方法進(jìn)行以下修改

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

成功的話可以看到控制臺輸出返回的消息