Ngx Bootstrap 弹出窗口一次只显示一个弹出窗口

Question

我正在使用 angular 使弹出窗口一次只出现一次这是 plunker 我正在使用 angular5 和 Ngx-Bootstrap .

因为我的项目中需要多个弹出窗口，但是只有在我们按下右上角的 (x) 时弹出窗口才会关闭。

如果您先按下切换按钮，然后再按下 "Pop over with title and a x button!"，则切换当前可与提供的 2 个弹出窗口一起使用我的 objective 是禁用另一个弹出窗口，如果当前打开一个弹出窗口。

例子有4个popover，popover 1-4。如果弹出窗口 1 打开，则无法打开其他弹出窗口。

如果我们关闭弹出窗口 1，另一个弹出窗口可以打开。

<div>
  <ng-template #popoverContent3>
    <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
      <p>this is a title...
      <button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      </p>
    </div>
    <div>
     <p>The best looking pop over, with a TITLE!</p>  
    </div>
  </ng-template>
  <br><br><br><br><br><br><br>
  <a  [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false"  placement="right">
   Pop over with title and a x button!
    </a>
</div>
<p>
  <span popover="Hello there! I was triggered by input"
        triggers=""  [isOpen]="isOpen">
  This text has attached popover
  </span>
</p>
<button type="button" class="btn btn-primary"
        (click)="isOpen = !isOpen">
  Toggle
</button>

Answer 1

如果您一次只想看到一个打开的弹出窗口，可以通过 ViewChildren 和 onShown 来实现。

算法是这样的：

1) 收听所有 onShown 事件

2) 关闭所有其他弹出窗口

@ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;

ngAfterViewInit() {
  this.popovers.forEach((popover: PopoverDirective) => {
    popover.onShown.subscribe(() => {
      this.popovers
      .filter(p => p !== popover)
      .forEach(p => p.hide());
    });
  });
}

示例 - https://stackblitz.com/edit/angular-zkw9mz?file=app%2Ffour-directions.ts

Ngx Bootstrap 弹出窗口一次只显示一个弹出窗口

Ngx Bootstrap Popover to display only one popover at a time

angular

frontend

angular5

popover

ngx-bootstrap