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

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。即一个用于 parent，另一个用于 child。但这也行不通。

Answer 1

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

Answer 2

问题是您正在调用 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();
}

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

Open a 2nd Modal and then close the 1st modal

typescript

ionic-framework

angular

ionic4