如何向后导航，返回一些数据，而不知道用户来自哪个页面

Question

我有一个页面，可以通过多个"父/源"页面导航到

。像这样：

Page 1 

Page 2 -- Page 4
/
Page 3 /

我需要将一些数据从第 4 页返回到它的父级(原始页面(。

我一直在使用this.navCtrl.back()来导航回应用程序的其余部分，但是这次我需要返回一些数据，并且似乎无法使用此功能。

我知道可以使用this.navCtrl.navigateBack(['page-1'], extras)传递数据，但我需要知道用户来自哪个页面。有没有简单的方法可以做到这一点？

我知道我可以在转到第 4 页时在附加内容上传递原始页面的名称，但它似乎不太正确(你有什么意见？

提前谢谢。

Answer 1

正如我在评论中所说，这看起来像是使用模态的完美场景。这样Page 4即使不知道哪个页面创建/呈现了数据，也可以将数据返回给调用方。

代码可能是这样的：

页 1/页 2/页 3：

// Angular
import { Component } from '@angular/core';
// Ionic
import { ModalController, OverlayEventDetail } from '@ionic/angular';
// Modal page
import { ModalPage } from '../modal/modal.page';
@Component({ ... })
export class ModalExample {
constructor(public modalController: ModalController) {}
async presentModal() {
// create the modal
const modal = await this.modalController.create({
component: ModalPage,
componentProps: {
'firstName': 'Douglas',
'lastName': 'Adams',
'middleInitial': 'N'
}
});
// handle the data returned by the modal
modal.onDidDismiss().then((detail: OverlayEventDetail) => {
if (detail !== null) {
console.log('The result: ', detail.data);
}
});
// present the modal
return await modal.present();
}
}

第 4 页

// Angular
import { Component, Input } from '@angular/core';
// Ionic
import { NavParams } from '@ionic/angular';
@Component({ ... })
export class ModalPage {
// Data passed in by componentProps
@Input() firstName: string;
@Input() lastName: string;
@Input() middleInitial: string;
constructor(navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParams
console.log(navParams.get('firstName');
}
dismiss() {
// using the injected ModalController this page
// can "dismiss" itself and optionally pass back data
this.modalCtrl.dismiss({
'dismissed': true
});
}
}

请确保浏览 Ionic Docs 中的延迟加载部分，以查看将使用它的页面应如何导入模态页面。

Answer 2

向前导航时已经将原点作为附加内容传递 - 然后它将在第 4 页上知道，并可用于将附加内容返回到特定页面。它非常简单，不需要模式对话框解决方法，这是没有要求的。