Angular CDK抽屉与Tooltip嵌套问题：按Esc关闭抽屉后Tooltip残留

核心原因 #

抽屉和Tooltip均通过Angular CDK Overlay独立创建，按下ESC键时仅触发了抽屉的关闭逻辑，Tooltip对应的Overlay未收到关闭信号，因此会保持显示状态。

解决方案：关闭抽屉时同步隐藏所有关联Tooltip #

方法1：通过ViewChildren直接控制Tooltip实例 #

针对使用原生cdkTooltip的场景，可在抽屉组件中获取所有Tooltip实例，在关闭抽屉时统一调用隐藏方法：

1. 在抽屉组件的TS文件中添加如下代码：

import { ViewChildren, QueryList } from '@angular/core';
import { CdkTooltip } from '@angular/cdk/tooltip';

// ...

@ViewChildren(CdkTooltip) private tooltips!: QueryList<CdkTooltip>;

// 统一的抽屉关闭方法（包含ESC触发的关闭逻辑）
closeDrawer() {
  // 先隐藏所有关联的Tooltip
  this.tooltips.forEach(tooltip => tooltip.hide());
  // 再执行抽屉关闭逻辑
  this.overlayRef?.dispose();
}

2. 确保ESC键触发的是这个closeDrawer()方法，而非直接调用overlayRef.dispose()。

方法2：关联Overlay实例实现自动关闭 #

若你是自定义Tooltip的Overlay实例，可将其配置为依赖抽屉的Overlay，当抽屉Overlay销毁时，Tooltip Overlay自动关闭：

// 创建Tooltip的Overlay时，指定parent为抽屉的OverlayRef
const tooltipOverlayRef = this.overlay.create({
  // 其他Tooltip配置项
  parent: this.drawerOverlayRef // drawerOverlayRef为抽屉的Overlay实例
});

此方法适合自定义Tooltip场景，原生cdkTooltip可通过自定义指令修改其Overlay配置来适配。

方法3：全局监听Overlay销毁事件统一处理 #

通过OverlayContainer监听Overlay销毁事件，当抽屉Overlay销毁时，关闭所有Tooltip对应的Overlay：

import { OverlayContainer } from '@angular/cdk/overlay';

constructor(private overlayContainer: OverlayContainer) {}

ngOnInit() {
  this.overlayContainer.getContainerElement().addEventListener('cdk-overlay-detached', (event) => {
    const targetOverlayRef = event.target.closest('.cdk-overlay-container')?.__overlayRef;
    // 判断当前销毁的是抽屉的Overlay
    if (targetOverlayRef === this.drawerOverlayRef) {
      // 遍历关闭所有Tooltip的Overlay
      document.querySelectorAll('.cdk-overlay-pane.cdk-tooltip').forEach(pane => {
        pane.__overlayRef?.dispose();
      });
    }
  });
}

此方法适合全局统一处理类似场景，注意DOM元素的判断逻辑需精准，避免误关闭其他Overlay。

验证 #

按上述方法修改后，打开抽屉并hover显示Tooltip，按下ESC键，抽屉关闭的同时Tooltip会同步隐藏，解决残留问题。

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