angular - Ngx Bootstrap 弹出框一次只显示一个弹出框

Question

我正在使用 Angular 使弹出框一次只出现一次这是 plunker我正在使用 angular5 和 Ngx-Bootstrap。

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

如果您先按切换按钮，然后按“带有标题和 x 按钮的弹出窗口!”，则切换当前适用于提供的 2 个弹出框! 如果弹出窗口当前打开，我的目标是禁用另一个弹出窗口。

例如有 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