Ionic 2 - 页面上的多个弹出窗口答案

【问题标题】：Ionic 2 - multiple popovers on PageIonic 2 - 页面上的多个弹出窗口
【发布时间】：2017-02-08 18:13:31
【问题描述】：

今天我正在使用 Angular 2 Stack 处理 Ionic 2 Pages。我的导航栏很少（图标），其中两个应该打开一个弹出框。

我的问题是：如何在一页上处理多个 Popover？如何防止同时呈现两个弹出框（应该只显示一个）？

doc 中的默认代码如下：

import { PopoverController } from 'ionic-angular';
import { MyPopOverPage } from './my-pop-over';

export class MyPage {
  constructor(public popoverCtrl: PopoverController) {
  }

  presentPopover() {
    let popover = this.popoverCtrl.create(MyPopOverPage);
    popover.present();
  }
}

【问题讨论】：

您声明您想要多个弹出框，但您的示例仅显示了在一个弹出框上的创建。我还没有对此进行测试，但可能会将弹出框名称传递给函数(click)="presentPopover(myPopover)"，然后循环遍历所有弹出框和.dismiss() ！不是myPopover

标签： javascript angular ionic2

【解决方案1】：

代码行：

let popover = this.popoverCtrl.create(MyPopOverPage);

正在创建一个弹出框实例的句柄。要创建另一个弹出框，只需创建另一个具有不同名称的句柄。

例子：

let popover2 = this.popoverCtrl.create(MyPopOverPage);

现在您可以通过引用popover 或popover2 来控制任一弹出框。将这些句柄与布尔 isActive 标志一起映射到某种形式的集合，然后您可以比较它们。

【讨论】：