web-dev-qa-db-fra.com

ionic 3 transmission de données au popover

Je suis incapable de le faire fonctionner. Le code d'appel contextuel est

presentPopover(myEvent){
        //alert('invoke popup')
      let popover = this.popoverCtrl.create(PopoverPage, this.data);
      popover.present(
          {
            ev: myEvent
          }
      );
}

et la partie où j'ai besoin d'accéder actuellement est:

export class PopoverPage{

  constructor(public viewCtrl: ViewController) {
   // alert('in the popup')  
   //alert(this.data)
  }

Alors, comment les données seront-elles disponibles dans le composant de la page contextuelle?

ionic3ionic-popover
13
Vik

Les paramètres/données peuvent être passés au Popover comme ceci

let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});

Et puis vous pouvez utiliser NavParams pour récupérer les données transmises au Popover.

    export class PopoverPage{        
      constructor(public navParams:NavParams) {
       console.log(this.navParams.data);
       let value1 = this.navParams.get('key1');
       let value2 = this.navParams.get('key2');
      }
    }

Pour ionic v4, vous pouvez envoyer des données en utilisant componentProps pour transmettre les données et les récupérer via navParams.

const popover = await this.popoverController.create({
      component: PopoverPage,
      componentProps:{key1:value1, key2: value2}
    });
    return await popover.present()
35
Suraj Rao

Vous devez passer this.data en tant que json objet, après cela, vous pouvez accéder à la valeur avec la clé.

Appel du code contextuel:

presentPopover(myEvent){
    //alert('invoke popup')
  this.data = {data_key:'your_value'};
  let popover = this.popoverCtrl.create(PopoverPage, this.data);
  popover.present(
      {
        ev: myEvent
      }
  );
}

Accès à la valeur à partir du popover:

export class PopoverPage{
  constructor(public viewCtrl: ViewController,public navParams:NavParams) {
     // alert('in the popup');
     //alert(this.navParams.get('data_key'));
  }
}
7
Sunil Kumar