一次在mouseenter事件上显示一个Popover(Angular，ngBootstrap) [英] Show one Popover on mouseenter event at a time (Angular, ngBootstrap)

问题描述

我有动态生成的div.在这些div上，我有ngPopovers.在ngPopover内部，我有一个按钮，我想单击按钮按钮.所以我已经触发了ng popover这样的triggers="mouseenter".

I have dynamically generated divs. On those divs, i have ngPopovers. Inside ngPopover, i have button and i want to click on button button. So i have triggered ng popover like this 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，则上一个弹出框应被隐藏，并且新的弹出框也应该可见.

Now popover is visible, but if i hover on another div(Div other than the popover container), the previous popover should be hidden and new popover should be visible if i hover any other div containing the popover.

请告诉我，如何一次显示一个弹出窗口. 这是一个正在工作的小提琴/堆栈闪电战 https://stackblitz.com/edit/angular-d4dgz1? file = app/popover-triggers.html

Please tell me, how can show one popover at a time. Here is a working fiddle/stack blitz https://stackblitz.com/edit/angular-d4dgz1?file=app/popover-triggers.html

推荐答案

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

Use HostListner to listen mousleave event on document then use @ViewChild Decorator to get the Element ref

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

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

这篇关于一次在mouseenter事件上显示一个Popover(Angular，ngBootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！