angular - 在同一个 View Ionic 中打开两个不同的 Popover

Question

我正在使用 angular 和 ionic 开发移动应用程序。我已经到了需要能够显示两个不同的弹出框的地步，允许用户比较两个不同的弹出框内的两个图像。

从下面的图片中，您可以看到一个弹出框示例，其中使用“Pin”按钮必须可以修复弹出框并允许用户打开另一个。

使用当前代码，我一次只能打开一个弹出框（实际上，当您单击弹出框的背景时，弹出框已关闭）

  async presentPopoverBali(event) {
    const popover = await this.popoverController.create({
      component: PopoverBaliComponent,
      event: event,
      translucent: true
      //backdropDismiss: false
    });
    return await popover.present();
  }

我的最终目标是能够打开一个弹出窗口，单击“Pin”修复它，然后打开另一个弹出窗口。以这样一种方式，它可以显示两个弹出框，以及它们各自的图像。

非常感谢你！

标签： angularionic-frameworkpopovermobile-application

Answer 1

我认为您必须创建多个弹出框引用，如下所示。

const popover1 = await this.popoverController.create({
  component: PopoverBaliComponent,
  event: event,
  translucent: true
});
return await popover.present();


const popover2 = await this.popoverController.create({
  component: PopoverBaliComponent,
  event: event,
  translucent: true
});
return await popover.present();