离子3将数据传递给popover

Vik*_*Vik 14 ionic-popover ionic3

我无法使它工作.弹出调用代码是

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

我目前需要访问的部分是:

export class PopoverPage{

  constructor(public viewCtrl: ViewController) {
   // alert('in the popup')  
   //alert(this.data)
  }
Run Code Online (Sandbox Code Playgroud)

那么如何将数据放在popupover页面组件中呢?

Sur*_*Rao 37

参数/数据可以像这样传递给Popover

let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});
Run Code Online (Sandbox Code Playgroud)

然后您可以使用它NavParams来检索传递给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');
      }
    }
Run Code Online (Sandbox Code Playgroud)


小智 7

您必须将此.data作为json对象传递,之后您可以使用key访问该值.

调用弹出代码:

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

从popover访问值:

export class PopoverPage{
  constructor(public viewCtrl: ViewController,public navParams:NavParams) {
     // alert('in the popup');
     //alert(this.navParams.get('data_key'));
  }
}
Run Code Online (Sandbox Code Playgroud)