Question

我使用angular来制作一个popover只能一次出现一次这是plunker我使用angular5和Ngx-Bootstrap。

因为我的项目中需要多个弹出框，但是只有按下右上角的（x）才能关闭弹出框。

如果您先按下切换按钮然后按下＆＃34;弹出标题和一个x按钮，切换当前可以使用2个弹出窗口！＆＃34; 如果弹出窗口当前打开，我的目标是禁用其他弹出窗口。

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

如果我们关闭popover 1，其他popover可以打开。

＆＃13;

<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>

＆＃13;

Answer 1

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

算法是这样的：

1）收听所有onShown个事件

2）关闭所有其他popovers

@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 Popover一次只显示一个popover

1 个答案: