Detailed explanation of reverse value transfer in Ionic3.x pop in Angular 4.x+Ionic3

This article mainly introduces you to the relevant information about the reverse value transfer of Ionic3.x pop in Angular 4. Refer to the value of learning, and friends who need it can learn together.

1.Ionic3.x page forward value transfer

About forward value transfer, I talked about it in the previous article , you can see here for details: http://www.jb51.net/article/136302.htm

2.Ionic3.x page pop reverse value transfer, there are two main ways

1. Use ES6 to provide Promise objects

2 Use Ionic3.x to provide Event objects, observer mode (publish/subscribe)

1) Use ES6 to provide Promise objects

Assume there are two pages, page A and page B. The scenario is as follows. A jumps to page B. When page B returns to page A, you need to give The value returned by page A.

A page code

html content

<button (tap)="goToBPage()">跳转到B页面</button>

ts content:

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

Note: Promise is an object provided by Es6, new is an object, and has two callback functions, one is resolve, the other is reject,resove It is a callback for successful execution, that is, we call the then execution method. Reject is a callback for execution failure, which corresponds to calling the catch method. Now es7 has new async and await. Async is a further encapsulation of Promise. For details, please see the official document!

B Page Code

ts Content:

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) Use Ionic3 .x provides Event objects, observer mode (publish/subscribe)

The event object mainly has three methods

1. Publish(topic, eventData )

`The first parameter is the name of the publishing event, and the second parameter is to send data. In fact, the third, fourth, etc. can also be sent, all of which can send data

2. Subscribe subscribe(topic, handler)

The first parameter is the event aluminum tube to be received. The second parameter represents the parameters transmitted when publishing. If the third parameter is passed in the publication, the same subscription The third parameter is the third parameter of the corresponding publication, and so on....`

3. Unsubscribe unsubscribe(topic, handler)

The first parameter is to The name of the unsubscribed event, the second is a callback function, return value: if removed successfully, return true
The code to implement reverse value transfer is as follows

A page code

ts code

 goToBPage(){
 this.events.subscribe('bevents', (params) => {
  // 接收B页面发布的数据
  console.log('接收数据为: '+ paramsVar);

  // 取消订阅
  this.events.unsubscribe('bevents'); 
 })
 this.navCtrl.push(BPage);
 }

B page code

ts code

goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish('bevents', '我是B页面数据');
 });
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

The problem and solution of {{}} flickering when vue renders

A brief discussion on js acquisition ModelAndView value problem

Solution to vue page loading flickering problem

The above is the detailed content of Detailed explanation of reverse value transfer in Ionic3.x pop in Angular 4.x+Ionic3. For more information, please follow other related articles on the PHP Chinese website!