Question

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

这是视图代码

 <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，则应该隐藏上一个弹出窗口，并且应该可以看到新的弹出窗口。

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

Answer 1

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

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

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

Answer 2

您还必须提到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>

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

2 个答案: