在时间上显示MouseEnter事件一个酥料饼（角，ngBootstrap）(Show one Po

我已动态生成的div。 在这些div，我有ngPopovers。 里面ngPopover，我有按钮，我想点击按钮按钮。 所以我有触发NG酥料饼这样的triggers="mouseenter" 。

下面是视图代码

 <div [ngbPopover]="popContent"  class="btn mr-2 btn-outline-secondary" 
 ngbPopover="<button>Hello</button>" triggers="mouseenter"  >
     Hover over me!
 </div>


 <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary"           
 ngbPopover="You see, I show up on hover!" triggers="mouseenter"  
 (click)="$event.stopPropagation()" >
 Hover over me!
  </div>

 <div [ngbPopover]="popContent" class="btn btn-outline-secondary" 
 ngbPopover="You see, I show up on hover!" triggers="mouseenter">
 Hover over me!
 </div>


<ng-template #popContent>
<div>
    <button> Cancel </button>
</div>
</ng-template>

现在酥料饼是可见的，但如果我在另一个DIV（比酥料饼div容器等）悬停，以前酥料饼应该被隐藏，如果我悬停包含酥料饼的任何其他分区新酥料饼应该是可见的。

请告诉我，怎么能一次显示一个酥料饼。 这里是工作提琴/堆栈热捧https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html

Answer 1:

使用HostListner对文档听mousleave事件，然后使用@ViewChild装饰来获取元素裁判

 @HostListener('mouseleave',['$event']) onHoverOutside(){
   this.ref.close();
  }

检查举例： https://stackblitz.com/edit/angular-d4dgz1-3w7f3p

Answer 2:

就不得不提到鼠标离开为好。 像这样：

<div [ngbPopover]="popContent"  class="btn mr-2 btn-outline-secondary" 
 ngbPopover="<button>Hello</button>" triggers="mouseenter:mouseleave"  >
     Hover over me!
 </div>


 <div [ngbPopover]="popContent" class="btn mr-2 btn-outline-secondary"           
 ngbPopover="You see, I show up on hover!" triggers="mouseenter:mouseleave"  
 (click)="$event.stopPropagation()" >
 Hover over me!
  </div>

 <div [ngbPopover]="popContent" class="btn btn-outline-secondary" 
 ngbPopover="You see, I show up on hover!" triggers="mouseenter:mouseleave">
 Hover over me!
 </div>


<ng-template #popContent>
<div>
    <button> Cancel </button>
</div>
</ng-template>

文章来源: Show one Popover on mouseenter event at a time (Angular, ngBootstrap)