Angular tooltip指令：如何获取当前激活实例及其宿主元素

核心问题原因 #

你当前所有指令实例都全局监听了document:keydown事件，所以按下Esc时所有实例的回调都会被触发，才会出现打印所有元素的情况。

方案1：通过单例管理服务追踪最后激活的实例 #

这个方案适合允许多个tooltip存在、仅需要操作最后触发的实例的场景：

1. 首先创建一个全局单例的Tooltip管理服务，用来存储当前激活的tooltip实例：

@Injectable({ providedIn: 'root' })
export class TooltipManager {
  // 存储最后激活的tooltip指令实例
  lastActive: TooltipDirective | null = null;
}

2. 在你的tooltip指令中注入该服务，在tooltip触发显示的逻辑中更新服务存储的激活实例：

// 假设这是你点击触发tooltip显示的方法
private showTooltip() {
  // 可选：如果需要每次仅显示一个tooltip，可先关闭之前激活的实例
  this.tooltipManager.lastActive?.removeComponent();
  // 更新当前激活实例为自身
  this.tooltipManager.lastActive = this;
  // 原有显示tooltip的逻辑
  // ...
}

3. 修改Esc按键的监听逻辑，只有当前实例是最后激活的实例时才执行关闭操作：

@HostListener('document:keydown', ['$event'])
public escape($event: KeyboardEvent) {
  if ($event.key.toLowerCase() !== 'escape' || this.tooltipManager.lastActive !== this) {
    return;
  }
  this.hostElement.focus();
  this.removeComponent();
  // 清空激活实例标记
  this.tooltipManager.lastActive = null;
}

方案2：动态绑定/解绑事件（性能更优） #

不需要所有实例都持续监听全局事件，仅在当前tooltip激活时绑定Esc监听，关闭后立即解绑，从根源避免多个实例触发回调：

export class TooltipDirective {
  private escapeListener?: (e: KeyboardEvent) => void;

  // 触发tooltip显示的方法
  private showTooltip() {
    // 原有显示逻辑
    // ...

    // 动态绑定Esc监听
    this.escapeListener = (e: KeyboardEvent) => {
      if (e.key.toLowerCase() === 'escape') {
        this.hostElement.focus();
        this.removeComponent();
        // 执行完逻辑后解绑事件
        this.cleanupEscapeListener();
      }
    };
    document.addEventListener('keydown', this.escapeListener);
  }

  // 移除tooltip的方法
  public removeComponent() {
    // 原有移除逻辑
    // ...
    // 其他触发关闭的场景（比如点击外部、hover失活）也要调用清理方法
    this.cleanupEscapeListener();
  }

  // 清理事件监听避免内存泄漏
  private cleanupEscapeListener() {
    if (this.escapeListener) {
      document.removeEventListener('keydown', this.escapeListener);
      this.escapeListener = undefined;
    }
  }

  // 组件销毁时也要清理事件
  ngOnDestroy() {
    this.cleanupEscapeListener();
  }
}

注意事项 #

• 如果你的场景允许同时存在多个打开的tooltip，两种方案都会默认仅处理最后一次触发的实例，符合你的需求
• 方案2相比方案1减少了全局监听的数量，性能表现更好，优先推荐使用

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