1. 程式人生 > >ionic2 從子頁面返回帶引數的兩種方法

ionic2 從子頁面返回帶引數的兩種方法

1、使用 Modal 代替 NavController 的 push 方法,然後在子頁面通過 dismiss 方法關閉時可攜帶引數返回母頁面。

在母頁面中:

getDetailNews(id) {
  let newsModal = this.modalCtrl.create(NewsDetailPage, { newsId: id });
  newsModal.onDidDismiss(data => {
    console.log(data);
  });

  newsModal.present();
}

然後在子頁面 NewsDetailPage 中註冊 dismiss 方法:

dismiss() {
  let data = { 'msg': '閱讀完畢' };
  this.viewCtrl.dismiss(data);
}

此時返回的 data 就會在母頁面中被觸發的 onDidDismiss 方法所獲取。

2、使用 Promise。

在母頁面使用 Promise 開啟子頁面,在子頁面通過 resolve 攜帶引數返回。

例如我在個人中心中要修改暱稱:  

openNicknamePage() {
  new Promise((resolve, reject) => {
    this.navCtrl.push(NicknamePage, { resolve: resolve });
  }).then(() => {

    // 若修改成功返回則在該程式碼塊中將本頁的 nickname 修改
  });
}

子頁面:首先獲取從母頁面傳過來的 resolve 物件:this.resolve = navParams.get('resolve');

然後在伺服器返回修改成功的訊號後呼叫 resolve 方法即可:  

this.httpService.put('/user/nickname', body).then(data => {
  this.toastService.presentToast("修改成功");

  this.resolve(); // 可在 resolve 中新增返回的資料,如 this.resolve(data);

  this.navCtrl.pop();
});