Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解

1.Ionic3.x 頁(yè)面正向傳值

關(guān)于正向傳值，上一篇文章里面有講，具體可以看這里：https://www.jb51.net/article/136302.htm

2.Ionic3.x 頁(yè)面 pop反向傳值,主要有兩種方式

     1 .利用ES6提供 Promise 對(duì)象

     2 利用Ionic3.x提供Event對(duì)象,觀察者模式(publish/subscribe)

1)利用ES6提供 Promise 對(duì)象

這邊假設(shè)有兩個(gè)頁(yè)面A頁(yè)面, B頁(yè)面, 情景如下，A跳轉(zhuǎn)B頁(yè)面，在B頁(yè)面返回A頁(yè)面需要給A頁(yè)面選回的值。

A頁(yè)面代碼

html內(nèi)容

<button (tap)="goToBPage()">跳轉(zhuǎn)到B頁(yè)面</button>

ts 內(nèi)容:

import BPage from './BPage'
export class APage{
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
// 用于pop 回調(diào)的 block
callBackFromB =(params) => {
 return new Promise((resolve, reject) => {
 if(params){
  resolve('成功取到B頁(yè)面返回的參數(shù)');
  console.log('B頁(yè)面參數(shù)為: '+ params);
 }else{
  reject(‘取回B頁(yè)面數(shù)據(jù)失敗')
 }
 });
 }
 goToBPage (){
 this.navCtrl.push(BPage, {
 callback: this.callBackFromB
 })
 }
}

備注:Promise是由Es6提供的一個(gè)對(duì)象，new一個(gè)對(duì)象，有兩個(gè)回調(diào)函數(shù),一個(gè)是resove,一個(gè)是reject,resove是執(zhí)行成功的回調(diào)，也就是我們調(diào)用 then執(zhí)行的方法， reject是執(zhí)行失敗的回調(diào),對(duì)應(yīng) 是調(diào)用 catch方法 ，現(xiàn)在es7新出一async和await，async是對(duì)Promise的進(jìn)一步封裝,詳情可具體看官方文檔！

B頁(yè)面代碼

ts 內(nèi)容:

constructor(public navCtrl: NavController, public navParams: NavParams) {
// 獲取對(duì)面A傳過(guò)來(lái)的回調(diào)方法
 this.callback = this.navParams.get("callback")
 
}
 goBack(){
 let param = '我是要給A頁(yè)面數(shù)據(jù)'
 this.callback(param).then(()=>{
 // pop返回方法
 this.navCtrl.pop();
 });
 }

1)利用Ionic3.x提供Event對(duì)象,觀察者模式(publish/subscribe)

event對(duì)象主要有3個(gè)方法

1.發(fā)布publish(topic, eventData)

`參數(shù)一是發(fā)布事件名字,第二個(gè)參數(shù)就是要發(fā)送數(shù)據(jù),其實(shí)還可以傳送第三，第四...等，都 是可以傳送數(shù)據(jù)的

2.訂閱 subscribe(topic, handler)

參數(shù)一是要接收的事件鋁管，第二個(gè)參數(shù)代表發(fā)布時(shí)傳送的參數(shù)，如果發(fā)布有傳第三個(gè)參數(shù)，同樣的訂閱的第三個(gè)參數(shù)就是對(duì)應(yīng)的發(fā)布的第三個(gè)參數(shù)，以此類推....`

3.取消訂閱 unsubscribe(topic, handler)

參數(shù)一是要取消訂閱的事件的名稱，第二是一個(gè)回調(diào)函數(shù)，返回值:如果被移除成功,返回true
實(shí)現(xiàn)反向傳值代碼如下

A頁(yè)面代碼

ts代碼

 goToBPage(){
 this.events.subscribe('bevents', (params) => {
  // 接收B頁(yè)面發(fā)布的數(shù)據(jù)
  console.log('接收數(shù)據(jù)為: '+ paramsVar);

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

B頁(yè)面代碼

ts代碼

goBack(){
 this.navCtrl.pop().then(() => {
 // 發(fā)布 bevents事件
 this.events.publish('bevents', '我是B頁(yè)面數(shù)據(jù)');
 });
}

總結(jié)

以上主要介紹反向傳值的2種方法，當(dāng)然還有其它方法，如果你有更好 的方法，歡迎留言討論，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。