在同一个 View Ionic 中打开两个不同的 Popover答案

【问题标题】：Open two different Popover in the same View Ionic在同一个 View Ionic 中打开两个不同的 Popover
【发布时间】：2019-11-11 22:38:02
【问题描述】：

我正在开发一个使用 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”修复它，然后打开另一个弹出窗口。以这样一种方式，它可以显示两个弹出框，以及它们各自的图像。

提前谢谢你！！

【问题讨论】：

标签： angular ionic-framework popover mobile-application

【解决方案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();

【讨论】：

【解决方案2】：

查看alert

 import { Component } from '@angular/core';
    import { AlertController } from '@ionic/angular';

    @Component({
      selector: 'alert-example',
      templateUrl: 'alert-example.html',
      styleUrls: ['./alert-example.css'],
    })
    export class AlertExample {

      constructor(public alertController: AlertController) {}


      async presentAlertConfirmone() {
        const alert = await this.alertController.create({
          header: 'Confirm!',
          message: 'Message <strong>text</strong>!!!',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
              handler: (blah) => {
                console.log('Confirm Cancel: blah');
              }
            }, {
              text: 'Okay',
              handler: () => {

                console.log('Confirm Okay');
              }
            }
          ]
        });

        await alert.present();
      }


 async presentAlertConfirmtwo() {
        const alert = await this.alertController.create({
          header: 'Confirm!',
          message: 'Message <strong>text</strong>!!!',
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
              handler: (blah) => {
                console.log('Confirm Cancel: blah');
              }
            }, {
              text: 'Okay',
              handler: () => {
                presentAlertConfirmtwo()
                console.log('Confirm Okay');
              }
            }
          ]
        });

        await alert.present();
      }

【讨论】：