angular - Öppna en andra modal och stäng sedan den första modalen

Jag har två modaler och problemet jag har är med att stänga den första modalen efter att den andra modalen har öppnats.

Jag har försökt med detta. Men då öppnas aldrig den andra modalen.

Detta är inom den första 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();
}

Uppdatering: Jag har försökt med 2 ModalControllers. Det vill säga en för föräldern och en annan för ett barn. Men det fungerade inte heller.

Svar #1

Problemet är att du anropar this.modalController.dismiss(), vilket stänger den aktiva andra modalen. Du behöver ha en referens till din första modal om du vill stänga den från den andra. Skicka en dismissFirstModal-funktion som en componentProp till den andra modalen och dra nytta av ionModalDidPresent-händelsen, som sänds efter att modalen har presenterats. Här är ett fungerande exempel

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

Svar #2

Försök att använda id när du skapar ett nytt modalelement. Till exempel

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

och sedan kan du stänga en modal när du avvisar genom att använda id.

Relaterade artiklar