web-dev-qa-db-fra.com

Ionic 4 - Transmettre les données de Modal

J'essaie de créer une fenêtre modale, de lui passer un tableau d'objets, de demander à un utilisateur de sélectionner un objet dans ce tableau, puis de faire en sorte que mon modal renvoie l'objet qu'il a sélectionné.

J'ai essayé d'utiliser l'approche Ionic 2 de modalName.onDidDismiss (data =>…) comme expliqué ici , mais apparemment Ionic = 4 a changé "onDidDismiss" pour ne pas accepter les valeurs qui lui sont passées.

Je ne sais donc pas comment renvoyer les données de ma fenêtre Modal vers la page qui l'a appelée.

ionic-frameworkionic4
9
MLynch

Il y a quelques jours, j'ai eu le même problème et voici ma solution:

Je suppose que vous avez déjà un composant qui contient le modal réel. nom UserModalComponent

Votre UserModalComponent devrait injecter le ModalController:

constructor(private modalController: ModalController){}

L'étape suivante consiste à renvoyer l'utilisateur sélectionné:

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

Dans votre composant dans lequel vous souhaitez appeler le modal et récupérer l'utilisateur, vous devez également injecter le ModalController comme ci-dessus et, en plus, vous avez besoin de cette méthode:

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

J'espère que ça aide! Si quelque chose n'est pas clair, demandez-le!

32
Lados

Le code ci-dessous fonctionne pour moi.

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();
  }
5
Swaran Gõdlã

Voici comment récupérer les données du modal dans Ionic 4:

        contactsModal.onDidDismiss().then(data=>{
        console.log('data came back from modal');
        console.log(data);
    })
1
Ion Scorobogaci
  //**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();
    }
0
Amarnath