码迷,mamicode.com
首页 > 其他好文 > 详细

Angular4.x+Ionic3 踩坑之路之 Ionic3.x pop反向传值

时间:2019-12-02 18:37:03      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:文章   总结   发布   back   cto   handle   mis   data-   license   

1.Ionic3.x 页面正向传值

关于正向传值,上一篇文章里面有讲,具体可以看这里
https://segmentfault.com/a/11...

2.Ionic3.x 页面 pop反向传值,主要有两种方式

  • 1 .利用ES6提供 Promise 对象
  • 2 利用Ionic3.x提供Event对象,观察者模式(publish/subscribe)
1)利用ES6提供 Promise 对象

这边假设有两个页面A页面, B页面, 情景如下,A跳转B页面,在B页面返回A页面需要给A页面选回的值。

A页面代码

html内容
<button (tap)="goToBPage()">跳转到B页面</button>
ts 内容:

import BPage from ‘./BPage‘
export class APage{


constructor(public navCtrl: NavController, public navParams: NavParams) {
}
// 用于pop 回调的 block
callBackFromB  =(params) => {
     return new Promise((resolve, reject) => {
      if(params){
          resolve(‘成功取到B页面返回的参数‘);
          console.log(‘B页面参数为: ‘+ params);
      }else{
          reject(‘取回B页面数据失败’)
      }
   });
 }
 
 goToBPage (){
     this.navCtrl.push(BPage, {
        callback: this.callBackFromB
     })
 }

}

备注:Promise是由Es6提供的一个对象,new一个对象,有两个回调函数,一个是resove,一个是reject,resove是执行成功的回调,也就是我们调用
then执行的方法, reject是执行失败的回调,对应 是调用 catch方法
,现在es7新出一async和await,async是对Promise的进一步封装,详情可具体看官方文档!

B页面代码

ts 内容:
constructor(public navCtrl: NavController, public navParams: NavParams) {
// 获取对面A传过来的回调方法
   this.callback = this.navParams.get("callback")
    
}

 goBack(){
   let param = ‘我是要给A页面数据‘
   this.callback(param).then(()=>{
     // pop返回方法
      this.navCtrl.pop();
   });
  }
   
1)利用Ionic3.x提供Event对象,观察者模式(publish/subscribe)
event对象主要有3个方法 

  • 发布publish(topic, eventData)

    参数一是发布事件名字,第二个参数就是要发送数据,其实还可以传送第三,第四...等,都 是可以传送数据的

  • 订阅 subscribe(topic, handler)

    参数一是要接收的事件名称,第二个参数代表发布时传送的参数,如果发布有传第三个参数,同样的订阅的第三个参数就是对应的发布的第三个参数,以此类推....

  • 取消订阅 unsubscribe(topic, handler)

    参数一是要取消订阅的事件的名称,第二是一个回调函数,返回值:如果被移除成功,返回true

实现反向传值代码如下

A页面代码

ts代码
   goToBPage(){
     this.events.subscribe(‘bevents‘, (params) => {
            // 接收B页面发布的数据
            console.log(‘接收数据为: ‘+ paramsVar);

            // 取消订阅
            this.events.unsubscribe(‘bevents‘); 
        })

        this.navCtrl.push(BPage);
   }

B页面代码

ts代码

goBack(){
  this.navCtrl.pop().then(() => {
    // 发布 bevents事件
    this.events.publish(‘bevents‘, ‘我是B页面数据‘);
  });
}


总结

以上主要介绍反向传值的2种方法,当然还有其它方法,如果你有更好 的方法,欢迎留言讨论

**愿你成为终身学习者**

Angular4.x+Ionic3 踩坑之路之 Ionic3.x pop反向传值

标签:文章   总结   发布   back   cto   handle   mis   data-   license   

原文地址:https://www.cnblogs.com/jlfw/p/11972138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!