1.Ionic3.x 頁面正向傳值

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計,高端網(wǎng)頁制作,對工商代辦等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)seo優(yōu)化優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

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

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

     1 .利用ES6提供 Promise 對象

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

1)利用ES6提供 Promise 對象

這邊假設(shè)有兩個頁面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提供的一個對象，new一個對象，有兩個回調(diào)函數(shù),一個是resove,一個是reject,resove是執(zhí)行成功的回調(diào)，也就是我們調(diào)用 then執(zhí)行的方法， reject是執(zhí)行失敗的回調(diào),對應(yīng) 是調(diào)用 catch方法 ，現(xiàn)在es7新出一async和await，async是對Promise的進(jìn)一步封裝,詳情可具體看官方文檔！

B頁面代碼

ts 內(nèi)容:

constructor(public navCtrl: NavController, public navParams: NavParams) {
// 獲取對面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對象,觀察者模式(publish/subscribe)

event對象主要有3個方法

1.發(fā)布publish(topic, eventData)

`參數(shù)一是發(fā)布事件名字,第二個參數(shù)就是要發(fā)送數(shù)據(jù),其實還可以傳送第三，第四...等，都 是可以傳送數(shù)據(jù)的

2.訂閱 subscribe(topic, handler)

參數(shù)一是要接收的事件鋁管，第二個參數(shù)代表發(fā)布時傳送的參數(shù)，如果發(fā)布有傳第三個參數(shù)，同樣的訂閱的第三個參數(shù)就是對應(yīng)的發(fā)布的第三個參數(shù)，以此類推....`

3.取消訂閱 unsubscribe(topic, handler)

參數(shù)一是要取消訂閱的事件的名稱，第二是一個回調(diào)函數(shù)，返回值:如果被移除成功,返回true
實現(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)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

當(dāng)前文章：Angular4.x+Ionic3踩坑之Ionic3.xpop反向傳值詳解
文章分享：http://jinyejixie.com/article18/pgicgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、ChatGPT、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)