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

前端小智發表於2019-03-04
Angular

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種方法，當然還有其它方法，如果你有更好 的方法，歡迎留言討論

願你成為終身學習者

相關文章