這篇文章主要給大家介紹了關於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 物件
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
})
}
}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)
參數一是要接收的事件鋁管，第二個參數代表發佈時傳送的參數，如果發布有傳第三個參數，同樣的訂閱的第三個參數就是對應的發布的第三個參數，以此類推....`
參數一是要取消訂閱的事件的名稱，第二是回呼函數，傳回值:如果被移除成功,傳回true
ts程式碼
goToBPage(){
this.events.subscribe('bevents', (params) => {
// 接收B页面发布的数据
console.log('接收数据为: '+ paramsVar);
// 取消订阅
this.events.unsubscribe('bevents');
})
this.navCtrl.push(BPage);
}ts程式碼
goBack(){
this.navCtrl.pop().then(() => {
// 发布 bevents事件
this.events.publish('bevents', '我是B页面数据');
});
}上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
vue頁面載入閃爍問題的解決方法
####### ####
以上是Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
