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

【问题标题】：How can I keep bootstrap popover alive while the popover is being hovered in Angular 2, 4, 5, 6?当弹出窗口悬停在 Angular 2、4、5、6 中时，如何让引导弹出窗口保持活动状态？
【发布时间】：2019-05-09 17:48:45
【问题描述】：

我已经阅读了许多与 popover 相关的 SO 帖子，最终出现在 angularjs 或 javascript 帖子中。 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>

【问题讨论】：

“但答案在 java 脚本中”... Angular 在 JavaScript 引擎中运行，因此可以按原样使用答案...您对答案有什么具体问题吗？
我不确定他们使用的是哪个弹出框，它们用于显示弹出框的属性不同，它们在每个属性前面加上'data-'
我有一个使用 ngbootstrap 的解决方案可以吗？或者你需要 ngxbootstrap 吗？
我需要使用 ngxbootstrap，因为我正在使用扩展 ngxbootstrap 弹出窗口的平台控件。谢谢你:)

标签： html angular angular6 popover ngx-bootstrap

【解决方案1】：

我发布了一个肮脏的修复作为答案，但仍有更多解决方案欢迎。

在寻找解决方案后，我最终做了一个肮脏的修复。通过鼠标进入/离开事件处理打开和关闭或弹出。

组件.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>

【讨论】：