一次在 mouseenter 事件上显示一个 Popover（Angular，ngBootstrap）

Question

我动态生成了 divs。在那些 div 上，我有 ngPopovers。在 ngPopover 中，我有按钮，我想点击按钮按钮。所以我像这样触发了 ng popover 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 而非弹出框容器上），则前一个弹出框应该被隐藏，如果我将鼠标悬停在任何其他弹出框上，新的弹出框应该可见其他 div 包含弹出窗口。

请告诉我，如何一次显示一个弹出窗口。这是一个有效的 fiddle/stack 闪电战 https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html

Answer 1

你还得提一下mouseleave。像这样：

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

Answer 2

使用 HostListener 监听文档上的 mousemove 事件，然后使用 @ViewChild Decorator 获取元素引用

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

查看示例：https://stackblitz.com/edit/angular-d4dgz1-3w7f3p

一次在 mouseenter 事件上显示一个 Popover（Angular，ngBootstrap）

Show one Popover on mouseenter event at a time (Angular, ngBootstrap)

ng-bootstrap

angular