如何修改PrimeNg pTooltip指令以停止监听Escape按键

方案一：自定义指令替换Tooltip的Escape事件监听 #

PrimeNG的Tooltip默认每个实例都会注册全局Escape事件，1000个实例同时响应时会触发大量变更检测，导致卡顿。通过自定义指令可以替换原始监听逻辑，仅在当前Tooltip可见时处理事件并阻止冒泡。

import { Directive, Host, Optional, OnDestroy } from '@angular/core';
import { Tooltip } from 'primeng/tooltip';

@Directive({
  selector: '[pTooltip][customTooltipEscapeFix]'
})
export class CustomTooltipEscapeFixDirective implements OnDestroy {
  constructor(@Host() @Optional() private tooltip: Tooltip) {
    if (this.tooltip?.documentEscapeListener) {
      // 移除原始全局监听
      document.removeEventListener('keydown', this.tooltip.documentEscapeListener);
      // 替换为自定义逻辑
      this.tooltip.documentEscapeListener = (event: KeyboardEvent) => {
        if (event.key === 'Escape' && this.tooltip.isVisible()) {
          this.tooltip.hide();
          event.stopPropagation(); // 阻止其他Tooltip重复处理
        }
      };
      document.addEventListener('keydown', this.tooltip.documentEscapeListener);
    }
  }

  ngOnDestroy() {
    if (this.tooltip?.documentEscapeListener) {
      document.removeEventListener('keydown', this.tooltip.documentEscapeListener);
    }
  }
}

使用时给带pTooltip的元素添加指令：

<div *ngFor="let l of longList">
  <div [pTooltip]="'Hi'" customTooltipEscapeFix>Text</div>
</div>

方案二：全局统一管理Tooltip的Escape事件 #

全局只注册一次Escape监听，维护活跃Tooltip集合，仅处理可见的Tooltip，避免多实例重复触发变更检测。

1. 实现全局服务 #

import { Injectable, NgZone } from '@angular/core';
import { Tooltip } from 'primeng/tooltip';

@Injectable({ providedIn: 'root' })
export class TooltipEscapeService {
  private activeTooltips = new Set<Tooltip>();

  constructor(private zone: NgZone) {
    // 在Angular变更检测外注册事件，减少不必要的digest
    this.zone.runOutsideAngular(() => {
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
          const visibleTooltip = Array.from(this.activeTooltips).find(t => t.isVisible());
          if (visibleTooltip) {
            // 回到Angular上下文执行hide操作
            this.zone.run(() => visibleTooltip.hide());
            event.stopImmediatePropagation();
          }
        }
      });
    });
  }

  registerTooltip(tooltip: Tooltip) {
    this.activeTooltips.add(tooltip);
  }

  unregisterTooltip(tooltip: Tooltip) {
    this.activeTooltips.delete(tooltip);
  }
}

2. 配合自定义指令 #

import { Directive, Host, Optional, OnDestroy } from '@angular/core';
import { Tooltip } from 'primeng/tooltip';
import { TooltipEscapeService } from './tooltip-escape.service';

@Directive({
  selector: '[pTooltip][globalEscapeFix]'
})
export class GlobalEscapeFixDirective implements OnDestroy {
  constructor(
    @Host() @Optional() private tooltip: Tooltip,
    private escapeService: TooltipEscapeService
  ) {
    if (this.tooltip) {
      // 移除Tooltip自带的全局监听
      if (this.tooltip.documentEscapeListener) {
        document.removeEventListener('keydown', this.tooltip.documentEscapeListener);
        this.tooltip.documentEscapeListener = null;
      }
      this.escapeService.registerTooltip(this.tooltip);
    }
  }

  ngOnDestroy() {
    if (this.tooltip) {
      this.escapeService.unregisterTooltip(this.tooltip);
    }
  }
}

使用方式：

<div *ngFor="let l of longList">
  <div [pTooltip]="'Hi'" globalEscapeFix>Text</div>
</div>

方案三：懒加载Tooltip（视口触发初始化） #

仅当元素进入视口时才初始化Tooltip，减少同时存在的实例数量，从根源降低事件处理压力。

import { Directive, Host, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Tooltip } from 'primeng/tooltip';

@Directive({
  selector: '[pTooltip][lazyTooltip]'
})
export class LazyTooltipDirective implements OnInit, OnDestroy {
  private observer: IntersectionObserver;

  constructor(@Host() private tooltip: Tooltip, private el: ElementRef) {}

  ngOnInit() {
    // 初始禁用Tooltip
    this.tooltip.disabled = true;

    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 元素进入视口，启用并初始化Tooltip
          this.tooltip.disabled = false;
          this.tooltip.ngOnInit();
          this.observer.unobserve(this.el.nativeElement);
        }
      });
    });

    this.observer.observe(this.el.nativeElement);
  }

  ngOnDestroy() {
    this.observer.disconnect();
  }
}

使用方式：

<div *ngFor="let l of longList">
  <div [pTooltip]="'Hi'" lazyTooltip>Text</div>
</div>

补充说明 #

• hideOnEscape属性无效的原因：即使设置为false，Tooltip仍会注册全局Escape事件，事件触发时仍会触发Angular变更检测，因此需要彻底移除或替换监听逻辑。
• 不推荐用ViewChild批量处理：1000个实例的批量获取和操作性能差，自定义指令的方式更优雅可复用。

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