Ionic 4 - передача данных назад от модальных

Question

Я пытаюсь создать модальное окно, передать ему массив объектов, сделать так, чтобы пользователь выбрал один объект из этого массива, и затем мой модальный назад вернул выбранный объект.

Я попытался использовать Ionic 2-подход modalName.onDidDismiss (data =>…) , как объяснено здесь , но, очевидно, Ionic 4 изменил «onDidDismiss», чтобы не принимать никакие значения, переданные ему обратно.

Так что я не знаю, как отправить данные из моего модального окна обратно на страницу, которая их вызывала.

Answer 1

  //**to receive data from modal once the modal is closed** 
    dismiss() {
   this.viewCtrl.dismiss({id: this.id});//or this.viewCtrl.dismiss({id:24});

    }

   async openModal(brand) {
  const modal = await this.modalController.create({
  component: ViewBrandPage,
  componentProps: { name : brand.name, id : brand.id, sub : brand.sub_id }
  });
  // **data from modal once the modal is closed**
    modal.onDidDismiss()
    .then((data) => {
       const user = data.data.id;
      alert(user);
      console.log(user);
    });
   return await modal.present();
    }

Answer 2

Ниже код работает для меня.

async openUserModal() {
    const modal = await this.modalCtrl.create({
      component: UserModalComponent,
      componentProps: { users: this.users },
    });

    modal.onDidDismiss()
      .then((data) => {
        const user = data['data']; // Here's your selected user!
    });

    return await modal.present();
  }

Answer 3

Вот как вы получаете данные из модального режима в Ionic 4:

        contactsModal.onDidDismiss().then(data=>{
        console.log('data came back from modal');
        console.log(data);
    })

Answer 4

Несколько дней назад у меня была та же проблема, и вот мое решение:

Я полагаю, у вас уже есть компонент, который содержит фактический модал.имя UserModalComponent

Ваш UserModalComponent должен получить введенный ModalController:

constructor(private modalController: ModalController){}

Следующий шаг - передать выбранного пользователя обратно:

selectUser(user: User):void {
  this.modalController.dismiss(user);
}

В вашем компоненте, в котором вы хотите вызвать модальное устройство и вернуть пользователя, вы также должны ввести ModalController, как указано выше, и дополнительно вам нужен этот метод:

 async openUserModal() {
    const modal = await this.modalCtrl.create({
      component: UserModalComponent,
      componentProps: { users: this.users },
    });

    modal.onDidDismiss()
      .then((data) => {
        const user = data['data']; // Here's your selected user!
    });

    return await modal.present();
  }

Iнадеюсь это поможет!Если что-то неясно, просто спросите!