Angular 8使用ngx-popover路由跳转时出现this.listenMouseFunc未定义错误

问题原因 #

ngx-popover 0.0.16版本存在销毁逻辑bug，当组件通过路由跳转销毁时，listenMouseFunc方法未正确初始化或已被清除，导致在ngOnDestroy钩子中调用该方法时报错。

解决方案 #

方案1：替换为ng-bootstrap的Popover（推荐） #

你已经导入了NgbPopoverModule，直接使用官方维护的ng-bootstrap组件替代老旧的ngx-popover，兼容性更好：

<button
  type="button"
  class="btn"
  style="background-color: transparent;"
  (click)="showPopup()"
  data-toggle="modal"
  data-target="#modalComment"
  [ngbPopover]="commentTemplate"
  placement="top"
  triggers="hover"
  [disabled]="!comment"
>
  <i *ngIf="comment" class="fa fa-lg fa-comment" style="color: orange;"></i>
  <i *ngIf="!comment" class="fa fa-lg fa-comment" style="color: silver;"></i>
</button>

<ng-template #commentTemplate>
  <div style="max-height: 100px; min-width: 100px; overflow-y: auto;">
    {{ comment }}
  </div>
</ng-template>

该方案完全避开旧库的bug，且ng-bootstrap与Angular 8适配性更强，路由跳转时不会出现销毁报错。

方案2：修复原ngx-popover的销毁逻辑 #

若必须继续使用ngx-popover 0.0.16，可在宿主组件的ngOnDestroy中手动清理popover实例，避免报错：

1. 组件代码中获取popover引用并处理销毁逻辑：

import { Component, ViewChild, OnDestroy } from '@angular/core';
import { PopoverContent } from 'ngx-popover';

@Component({
  // 组件元数据（保持原有配置）
})
export class YourComponent implements OnDestroy {
  @ViewChild('myPopover') myPopover: PopoverContent;

  ngOnDestroy() {
    if (this.myPopover) {
      // 将listenMouseFunc赋值为空函数，避免销毁时调用报错
      this.myPopover.listenMouseFunc = () => {};
      // 先关闭弹窗再销毁
      this.myPopover.hide();
    }
  }
}

2. 模板代码保持不变即可，组件销毁时会主动处理listenMouseFunc，避免触发错误。

注意事项 #

• ngx-popover 0.0.16属于老旧版本，后续可能出现更多兼容性问题，建议优先升级或替换为维护中的库。
• 使用ng-bootstrap时，需确保版本与Angular 8匹配（ng-bootstrap v5.x对应Angular 8）。

内容的提问来源于stack exchange，提问作者nicooletahehe