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

關(guān)于正向傳值，上一篇文章里面有講，具體可以看這里：//m.survivalescaperooms.com/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)的 blockcallBackFromB =(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傳過來(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); }