1.Ionic3.x 頁面正向傳值

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

關于正向傳值，上一篇文章里面有講，具體可以看這里：https://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頁面返回的參數(shù)');
  console.log('B頁面參數(shù)為: '+ params);
 }else{
  reject(‘取回B頁面數(shù)據(jù)失敗')
 }
 });
 }
 goToBPage (){
 this.navCtrl.push(BPage, {
 callback: this.callBackFromB
 })
 }
}

備注:Promise是由Es6提供的一個對象，new一個對象，有兩個回調函數(shù),一個是resove,一個是reject,resove是執(zhí)行成功的回調，也就是我們調用 then執(zhí)行的方法， reject是執(zhí)行失敗的回調,對應 是調用 catch方法 ，現(xiàn)在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頁面數(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ù)就是對應的發(fā)布的第三個參數(shù)，以此類推....`

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

參數(shù)一是要取消訂閱的事件的名稱，第二是一個回調函數(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ù)');
 });
}

總結

以上主要介紹反向傳值的2種方法，當然還有其它方法，如果你有更好 的方法，歡迎留言討論，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

當前文章：Angular4.x+Ionic3踩坑之Ionic3.xpop反向傳值詳解
文章分享：http://www.chinadenli.net/article18/pgicgp.html

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

廣告

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