离子 3 将数据传递给弹出框答案

【问题标题】：ionic 3 passing data to popover离子 3 将数据传递给弹出框
【发布时间】：2019-04-05 17:48:54
【问题描述】：

我无法让它工作。弹出调用代码是

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

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

export class PopoverPage{

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

那么数据将如何在popupover页面组件中可用？

【问题讨论】：

标签： ionic3 ionic-popover

【解决方案1】：

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

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

然后您可以使用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');
      }
    }

对于 ionic v4，您可以使用 componentProps 发送数据以传递数据并通过 navParams 检索。

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

【讨论】：

另外，你可以在popover组件中获取数据，也可以通过View Controller获取数据，这是更正确的方式：import { ViewController } from 'ionic-angular'; export class PopoverComponent { constructor( public viewCtrl: ViewController ) {} // 这里我们正在获取我们在父组件中设置的数据对象 public data: any= this.viewCtrl.data; }
@nikola.maksimovic 这很有趣...我将不得不检查和更新..doc 似乎没有显示该属性..
离子 4 中的方法是什么。我在离子 4 中未定义此方法
是的，我明白了。在 ionic 4 中，PopoverController 中有一个名为 componentProps 的属性描述：要传递给 popover 组件的数据。类型 :{ [key: string]: any; }。我们可以像 ionic 3 一样检索它，意思是 NavParams @SurajRao

【解决方案2】：

您必须将 this.data 作为 json 对象传递，然后您才能访问该值带钥匙。

调用弹窗代码：

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

从弹出框访问值：

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

【讨论】：