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种方法，当然还有其它方法，如果你有更好 的方法，欢迎留言讨论
**愿你成为终身学习者**