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

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

     1 .利用ES6提供 Promise 对象

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

 

1)利用ES6提供 Promise 对象

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

A页面代码

 <  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();
 });
 } 

 

2.利用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页面数据' );
 });
} 

 

查看更多关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解的详细内容...