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

1.ionic3.x 页面正向传值

关于正向传值，上一篇文章里面有讲，具体可以看这里：

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个方法

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