Vyhledávání na webu

angular - Otevřít druhé modální okno a poté zavřít první modální okno

Mám dva modály a problém, který mám, je s uzavřením prvního modálu poté, co byl otevřen druhý modál.

Zkoušel jsem to. Ale pak se nikdy neotevře druhé modální okno.

To je v rámci 1. módu

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

Aktualizace: Zkoušel jsem to s 2 ModalControllers. Tj. jeden pro rodiče a druhý pro dítě. Ale ani to nefungovalo.

Odpověď č. 1

Problém je v tom, že voláte this.modalController.dismiss(), což zavírá aktivní druhé modalní okno. Pokud chcete zavřít první modalní okno z druhého, musíte mít referenci na první modal. Předáte funkci dismissFirstModal jako componentProp do druhého modalu a využijete událost ionModalDidPresent, která je vyvolána po zobrazení modalu. Zde je funkční příklad

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

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

Odpověď č. 2

Snažte se použít id při vytváření nového modálního prvku. Například

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

a pak můžete zavřít modální okno při zavření pomocí ID.

Související články