ionic2 從子頁面返回帶引數的兩種方法
阿新 • • 發佈:2018-12-14
1、使用 Modal 代替 NavController 的 push 方法,然後在子頁面通過 dismiss 方法關閉時可攜帶引數返回母頁面。
在母頁面中:
getDetailNews(id) {
let newsModal = this.modalCtrl.create(NewsDetailPage, { newsId: id });
newsModal.onDidDismiss(data => {
console.log(data);
});
newsModal.present();
}
然後在子頁面 NewsDetailPage 中註冊 dismiss 方法:
dismiss() {
let data = { 'msg': '閱讀完畢' };
this.viewCtrl.dismiss(data);
}
此時返回的 data 就會在母頁面中被觸發的 onDidDismiss 方法所獲取。
2、使用 Promise。
在母頁面使用 Promise 開啟子頁面,在子頁面通過 resolve 攜帶引數返回。
例如我在個人中心中要修改暱稱:
openNicknamePage() { new Promise((resolve, reject) => { this.navCtrl.push(NicknamePage, { resolve: resolve }); }).then(() => { // 若修改成功返回則在該程式碼塊中將本頁的 nickname 修改 }); }
子頁面:首先獲取從母頁面傳過來的 resolve 物件:this.resolve = navParams.get('resolve');
然後在伺服器返回修改成功的訊號後呼叫 resolve 方法即可:
this.httpService.put('/user/nickname', body).then(data => { this.toastService.presentToast("修改成功"); this.resolve(); // 可在 resolve 中新增返回的資料,如 this.resolve(data); this.navCtrl.pop(); });