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

Question

我正在使用角度和离子的移动应用程序。我已经到了可以显示两个不同的弹出窗口的地步，允许用户比较两个不同的弹出窗口中的两个图像。

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

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

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

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

非常感谢您！

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();

Answer 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();
      }