انگولار - باز کردن یک مودال دوم و سپس بستن مودال اول

من دو مودال دارم و مشکلی که دارم این است که نمیتوانم مودال اول را بعد از باز شدن مودال دوم ببندم.

من این را امتحان کردهام. اما بعدش هرگز مدل دوم باز نمیشود.

این در داخل حالت اول است

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

بهروزرسانی: من با ۲ ModalControllers امتحان کردم. یعنی یکی برای والد و دیگری برای فرزند. اما آن هم کار نکرد.

پاسخ شماره ۱

مشکل این است که شما this.modalController.dismiss() را فراخوانی میکنید، که دومین مودال فعال را میبندد. اگر میخواهید مودال اول را از دومین مودال ببندید، باید یک ارجاع به مودال اول داشته باشید. یک تابع dismissFirstModal را به عنوان componentProp به دومین مودال ارسال کنید و از رویداد ionModalDidPresent که پس از نمایش مودال صادر میشود، استفاده کنید. در اینجا یک مثال عملی آورده شده است.

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

پاسخ شماره ۲

سعی کنید هنگام ایجاد یک عنصر مودال جدید از 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);
}

و سپس میتوانید یک مودال را هنگام بستن با استفاده از شناسه ببندید.