Ionic之路

ionic3 进子页面修改数据,带参返回父页面的两种方法

2017-12-29  本文已影响20人  Kathy丶Andy

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();
  });
}
上一篇 下一篇

猜你喜欢

热点阅读