Question

我有两个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。即一个给父母，另一个给孩子。但这也行不通。

Answer 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();
}

Answer 2

在创建新的模态元素时尝试使用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关闭关闭模式。

打开第二个模态，然后关闭第一个模态

2 个答案: