当弹出窗口悬停在 Angular 2、4、5、6 时，如何让 bootstrap 弹出窗口保持活动状态？

Question

我经历了很多 post 与弹出窗口相关的 SO，我最终在 angularjs 或 java 脚本 post 中。 This post 解释了我需要的相同要求，但答案在 java 脚本中，他们使用的是 bootstrap3。

我有一个跨度，我想在悬停它时显示弹出窗口，并且我希望当光标位于弹出窗口上时弹出窗口停留在屏幕上。

<ng-template #popTemplate id="commentPopover">
   <div style="max-height: 6em;overflow: auto;" id="divPopover">
       {{ Comment }}
   </div>
</ng-template>
<span [popover]="popTemplate" placement="bottom" triggers="mouseenter:mouseleave">
      <i class="icon"></i>
</span>

Answer 1

I am posting a dirty fix as a answer but more solutions are still welcome.

在搜索解决方案后，我最终进行了一次肮脏的修复。通过鼠标 enter/leave 事件处理打开和关闭或弹出窗口。

Component.ts :

mouseleave(popover: any) {
  this.hidePopOver(popover);
}

  hidePopOver(popover: any) {
    setTimeout(() => {
      if (!isNullOrUndefined(popover)) {
        popover.hide();
      }
    }, 500);
  }

  showPopOver(pop: any, comment: string) {
    if (comment === null || comment === '') {
      return;
    }
    if (!isNullOrUndefined(pop)) {
      pop.show();
    }
  }

component.html:

<div (mouseleave)="mouseleave(popover)">
  <ng-template #popTemplate id="commentPopover">
    <div style="max-height: 6em;overflow: auto;" id="divPopover"
          (mouseenter)="showPopOver(popover, Comment)" (mouseleave)="hidePopOver(popover)">
       {{ Comment }}
    </div>
  </ng-template>
  <span [popover]="popTemplate" placement="bottom" (mouseenter)="showPopOver(popover,Comment)">
      <i class="icon"></i>
  </span>
</div>

当弹出窗口悬停在 Angular 2、4、5、6 时，如何让 bootstrap 弹出窗口保持活动状态？

How can I keep bootstrap popover alive while the popover is being hovered in Angular 2, 4, 5, 6?

html

popover

ngx-bootstrap

angular

angular6