ionic3 進子頁面修改資料,帶參返回父頁面的兩種方法

weixin_34120274發表於2017-12-29

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() {  
    let callback = (params) => {
        return new Promise((resolve, reject) => {
            if (params) {
                this.coin.next(params.coin);
            }
            resolve();
        });
    }
    this.navCtrl.push('CoinsPage', { coin: this.coin.value, callback: callback });
}  

子頁面:首先獲取從母頁面傳過來的 resolve 物件:this.resolve = navParams.get('resolve');
然後在伺服器返回修改成功的訊號後呼叫 resolve 方法即可:

 this.coin = this.navParams.get('coin');
 this.callback = this.navParams.get("callback")
  checked() {
      let params = {
        coin: this.coin
      }
    this.callback(params).then(() => {
    this.navCtrl.pop();
  });
}

相關文章