ionic2 从子页面返回带参数的两种方法

柔光的暖阳◎ 2022-05-08 06:04 191阅读 0赞

原文出处：[https://blog.csdn.net/zf\_hacjox/article/details/64443442][https_blog.csdn.net_zf_hacjox_article_details_64443442]  
延伸阅读：[ionic3反向传值的补充说明:关于如何 pop with params (CallBack)][ionic3_ pop with params _CallBack]

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

[https_blog.csdn.net_zf_hacjox_article_details_64443442]: https://blog.csdn.net/zf_hacjox/article/details/64443442
[ionic3_ pop with params _CallBack]: https://www.jianshu.com/p/f8a357eff039