Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

2023-09-15 12:35:05 71

1.Ionic3.x页面正向传值

关于正向传值，上一篇文章里面有讲，具体可以看这里：https://www.nhooo.com/article/136302.htm

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内容

跳转到B页面

ts内容:

importBPagefrom'./BPage'
exportclassAPage{
constructor(publicnavCtrl:NavController,publicnavParams:NavParams){
}
//用于pop回调的block
callBackFromB=(params)=>{
returnnewPromise((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(publicnavCtrl:NavController,publicnavParams:NavParams){
//获取对面A传过来的回调方法
this.callback=this.navParams.get("callback")

}
goBack(){
letparam='我是要给A页面数据'
this.callback(param).then(()=>{
//pop返回方法
this.navCtrl.pop();
});
}

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

event对象主要有3个方法

1.发布publish(topic,eventData)

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

2.订阅subscribe(topic,handler)

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

3.取消订阅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种方法，当然还有其它方法，如果你有更好的方法，欢迎留言讨论，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

热门推荐

随机推荐