angular - Deschide un al 2-lea modal și apoi închide primul modal

Am două ferestre modale și problema pe care o am este cu închiderea primei ferestre modale după ce a fost deschisă a doua fereastră modală.

Am încercat asta. Dar atunci nu se deschide niciodată al doilea modal.

Acesta este în interiorul primului modal

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

Actualizare: Am încercat cu 2 ModalControllers, adică unul pentru părinte și altul pentru copil. Dar nici asta nu a funcționat.

Răspuns #1

Problema este că apelezi this.modalController.dismiss(), care închide al doilea modal activ. Trebuie să ai o referință la primul tău modal dacă vrei să îl închizi din al doilea. Transmite o funcție dismissFirstModal ca componentProp către al doilea modal și profită de evenimentul ionModalDidPresent, care este emis după ce modalul a fost prezentat. Iată un exemplu funcțional

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

Răspunsul #2

Încercați să folosiți id atunci când creați un element modal nou. De exemplu

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

și apoi poți închide un modal atunci când îl respingi folosind id-ul.