web-dev-qa-db-fra.com

Ionic 2 - Récupère les données de modal

J'ai un composant qui est mon interface principale. À l'intérieur de ce composant, un clic sur un bouton ouvre ionic 2 modal qui permet de choisir des éléments.

Ma page modale (itemsPage):

..list of items here

    <button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
       (click)="useItem(selectedItem)">
        <span>Choose item {{selectedItem?.name}}</span>
      </button>

useItem() devrait:

  • Envoyer des données d'élément à mon composant d'interface principal
  • Fermer le modal
  • Exécuter une méthode dans mon interface principale

Comment je peux effectuer de telles actions? Impossible de trouver de la documentation sur la communication entre modal et composant dans Ionic 2.

ionic2
21
TheUnreal

Il s’agit simplement d’utiliser des paramètres dans viewController.

Dans votre composant d'interface principale,

let chooseModal = this.modalCtrl.create(itemsPage);
  chooseModal.onDidDismiss(data => {
     console.log(data);
});
chooseModal.present();

Dans votre page modale,

useItem(item) {   
  this.viewCtrl.dismiss(item);
}

Lien vers le contrôleur modal ici

48
Suraj Rao

C’est un exemple clair d’obtention de données à partir de modaux dans ionic . Vous devez ajouter un gestionnaire pour onDismiss () de modal, puis renvoyer les données à partir du modal lui-même en les passant à la méthode de renvoi () du ViewController:

// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });

// Getting data from the modal:
modal.onDismiss(data => {
  console.log('MODAL DATA', data);
 });

this.nav.present(modal);

sur la page modale

// myModal.ts
constructor(private navParams: NavParams, private viewCtrl: ViewController) {
// Getting data from the page:
  var dataFromPage = navParams.get('data');
}

dismiss() {
// Returning data from the modal:
  this.viewCtrl.dismiss(
      // Whatever should be returned, e.g. a variable name:
      // { name : this.name } 
  );
}
2
Felix Runye