Angular4.x+Ionic3 踩坑之路之 Ionic3.x pop反向傳值

1.Ionic3.x 頁面正向傳值

關於正向傳值，上一篇文章裏面有講，具體能夠看這裏segmentfault.com/a/11...

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

• 發佈publish(topic, eventData)

` 參數一是發佈事件名字,第二個參數就是要發送數據,其實還能夠傳送第三，第四...等，都 是能夠傳送數據的

• 訂閱 subscribe(topic, handler)

參數一是要接收的事件鋁管，第二個參數表明發佈時傳送的參數，若是發佈有傳第三個參數，一樣的訂閱的第三個參數就是對應的發佈的第三個參數，以此類推.... `

• 取消訂閱 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種方法，固然還有其它方法，若是你有更好 的方法，歡迎留言討論

願你成爲終身學習者