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

這篇文章主要給大家介紹了關於Angular 4.x Ionic3踩坑之Ionic3.x pop反向傳值的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作有一定的參考學習價值，需要的朋友一起學習學習吧。

1.Ionic3.x 頁面正向傳值

#關於正向傳值，上一篇文章裡面有講，具體可以看​​這裡：http://www.jb51.net/article/136302.htm

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

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

上面是我整理給大家的，希望今後對大家有幫助。
相關文章：

vue渲染時閃爍{{}}的問題及解決方法

##淺談js獲取ModelAndView值的問題

vue頁面載入閃爍問題的解決方法

####### ####

以上是Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！