快捷導(dǎo)航

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

更新時(shí)間：2018年03月13日 09:46:58 作者：前端小智

這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

1.Ionic3.x 頁面正向傳值

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

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

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

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

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

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

A頁面代碼

html內(nèi)容

<button (tap)="goToBPage()">跳轉(zhuǎn)到B頁面</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頁面返回的參數(shù)');
  console.log('B頁面參數(shù)為: '+ params);
 }else{
  reject(‘取回B頁面數(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頁面代碼

ts 內(nèi)容:

constructor(public navCtrl: NavController, public navParams: NavParams) {
// 獲取對(duì)面A傳過來的回調(diào)方法
 this.callback = this.navParams.get("callback")
 
}
 goBack(){
 let param = '我是要給A頁面數(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頁面代碼

ts代碼

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

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

B頁面代碼

ts代碼

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

總結(jié)

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具