Question

我在angularjs或javascript帖子中浏览了很多有关我最终遇到的popover的帖子。 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

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

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

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悬停弹出式弹出窗口时，如何保持启动弹出式窗口活跃？

1 个答案: