@H_403_0@
1.Ionic3.x 页面正向传值
@H_403_0@关于正向传值,上一篇文章里面有讲,具体可以看这里: @H_403_0@2.Ionic3.x 页面 pop反向传值,主要有两种方式
@H_403_0@ 1 .利用ES6提供 Promise 对象 @H_403_0@ 2 利用Ionic3.x提供Event对象,观察者模式(publish/subscribe) @H_403_0@1)利用ES6提供 Promise 对象
@H_403_0@这边假设有两个页面A页面,B页面,情景如下,A跳转B页面,在B页面返回A页面需要给A页面选回的值。 @H_403_0@A页面代码 @H_403_0@html内容跳转到B页面
@H_403_0@ts 内容:
{
return new Promise((resolve,reject) => {
if(params){
resolve('成功取到B页面返回的参数');
console.log('B页面参数为: '+ params);
}else{
reject(‘取回B页面数据失败')
}
});
}
goToBPage (){
this.navCtrl.push(BPage,{
callback: this.callBackFromB
})
}
}
@H_403_0@备注:Promise是由Es6提供的一个对象,new一个对象,有两个回调函数,一个是resove,一个是reject,resove是执行成功的回调,也就是我们调用 then执行的方法, reject是执行失败的回调,对应 是调用 catch方法 ,现在es7新出一async和await,async是对Promise的进一步封装,详情可具体看官方文档!
@H_403_0@B页面代码
@H_403_0@ts 内容:
}
goBack(){
let param = '我是要给A页面数据'
this.callback(param).then(()=>{
// pop返回方法
this.navCtrl.pop();
});
}
@H_403_0@1)利用Ionic3.x提供Event对象,观察者模式(publish/subscribe)
@H_403_0@goBack(){
let param = '我是要给A页面数据'
this.callback(param).then(()=>{
// pop返回方法
this.navCtrl.pop();
});
}
event对象主要有3个方法
@H_403_0@1.发布publish(topic,eventData) @H_403_0@`参数一是发布事件名字,第二个参数就是要发送数据,其实还可以传送第三,第四...等,都 是可以传送数据的 @H_403_0@2.订阅 subscribe(topic,handler) @H_403_0@参数一是要接收的事件铝管,第二个参数代表发布时传送的参数,如果发布有传第三个参数,同样的订阅的第三个参数就是对应的发布的第三个参数,以此类推....` @H_403_0@3.取消订阅 unsubscribe(topic,handler) @H_403_0@参数一是要取消订阅的事件的名称,第二是一个回调函数,返回值:如果被移除成功,返回true 实现反向传值代码如下 @H_403_0@A页面代码 @H_403_0@ts代码 {
// 接收B页面发布的数据
console.log('接收数据为: '+ paramsVar);
@H_403_0@B页面代码
@H_403_0@ts代码
// 取消订阅
this.events.unsubscribe('bevents');
})
this.navCtrl.push(BPage);
}
{
// 发布 bevents事件
this.events.publish('bevents','我是B页面数据');
});
}
@H_403_0@