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

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();
  });
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 912评论 0 2
  • Promiese 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,语法上说,Pr...
    雨飞飞雨阅读 3,387评论 0 19
  • 00、前言Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区...
    夜幕小草阅读 2,142评论 0 12
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,752评论 0 5
  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,125评论 0 4