将数据传递到 Ionic 5 中的弹出框

【问题标题】：Pass data to a popover in Ionic 5将数据传递到 Ionic 5 中的弹出框
【发布时间】：2021-05-13 06:59:28
【问题描述】：

在 Ionic 3 中，将数据传递到弹出框非常简单：

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

并且可以使用navParams检索它

您如何在 Ionic 5 中实现相同的目标？文档没有说明传递数据。

【问题讨论】：

标签： ionic5

【解决方案1】：

我想既然我们处理父组件和子组件很像处理模态，我会调整 documented modal method of passing and retrieving data（即使用 componentProps 属性）：

  this.popover = await this.popoverController.create({
      component: popoverComponent,
      componentProps: {key1: value1}
  });

为了让数据通过，我只需将其设置为@Input()：

export class ModalPage {

  // Data passed in by componentProps
  @Input() key1: string;
}

【讨论】：

【解决方案2】：

点击显示弹窗

showPopup(){
        this.popoverController.create({
          component: PopupPage,
          translucent: true,
          cssClass: '',
          mode: 'ios',
          componentProps: { key1:value1, key2: value2 }
        }).then((popover: any) => {
          popover.present();
        });
}


Get Popup Data page(popup.page.ts)

constructor(public navParams: NavParams){
const key1= this.navParams.get('key1');
const key2 = this.navParams.get('key2 ');
}

【讨论】：