我有两个Modals,而我遇到的问题是在打开第二个模态后关闭第一个模态。
我已经尝试过了。但是后来它再也没有打开第二模式。
这是第一个模态
async next(): Promise<void> { // try to open 2nd Modal and after that close the 1st Modal
await this.showSeeAgainModal();
this.cancel();
}
cancel(): void {
this.modalController.dismiss();
}
async showSeeAgainModal(): Promise<void> { // This is the 2nd Modal
const modal: HTMLIonModalElement = await this.modalController.create({
component: SeeAgainPage,
});
modal.onDidDismiss().then(async (res) => {
});
return await modal.present();
}
更新:我尝试使用2 ModalControllers
。即一个给父母,另一个给孩子。但这也行不通。
答案 0 :(得分:1)
问题是您正在调用this.modalController.dismiss()
,它将关闭活动的第二个模式。如果要从第二个模态中删除它,则需要引用第一个模态。将dismissFirstModal
函数作为componentProp
传递给第二个模态,并利用ionModalDidPresent
事件,该事件在模态呈现后发出。
这是有效的example
first.component.ts
constructor(public modalController: ModalController){}
async presentFirstModal() {
const dismissFirstModal = () => {
modal.dismiss();
};
const modal = await this.modalController.create({
component: SecondComponent,
componentProps: {dismissFirstModal: dismissFirstModal}
});
return await modal.present();
}
second.component.ts
@Input() dismissFirstModal;
constructor(public modalController: ModalController){}
ngOnInit() {}
async showSeeAgainModal(): Promise<void> {
const modal = await this.modalController.create({
component: SeeAgainPage,
});
modal.addEventListener('ionModalDidPresent', () => {
this.dismissFirstModal()
})
return modal.present();
}
答案 1 :(得分:0)
在创建新的模态元素时尝试使用id
。例如
showSeeAgain(id: string) {
this.modalCtrl.create(
{
component: CreateBookingComponent,
id: id // here is the id of a new modal
}).then(
modalElement => {
modalElement.present();
return modalElement.onDidDismiss();
}).then(data => console.log(data));
}
cancel(id: string) {
this.modalCtrl.dismiss({message: 'I am closing a modal'}, 'confirm', id);
}
,然后您可以使用id关闭关闭模式。