如何在另一个组件中检查CDK浮层（OverlayRef）是否处于打开状态？

原生方法说明 #

Angular CDK的OverlayRef本身提供了hasAttached()方法，可直接判断浮层是否处于挂载（打开）状态。但核心问题是：组件A创建的OverlayRef是局部实例，组件B无法直接访问到它——不是缺少原生判断方法，而是需要解决实例的跨组件共享问题。

推荐解决方案：通过全局服务管理Overlay实例 #

这是符合Angular最佳实践的实现方式，具体步骤如下：

1. 创建Overlay管理服务

import { Injectable } from '@angular/core';
import { OverlayRef } from '@angular/cdk/overlay';

@Injectable({ providedIn: 'root' })
export class OverlayManagerService {
  private activeOverlayRef: OverlayRef | null = null;

  // 保存打开的浮层实例，并监听销毁事件自动清空
  setActiveOverlay(ref: OverlayRef): void {
    this.activeOverlayRef = ref;
    ref.detachments().subscribe(() => {
      this.activeOverlayRef = null;
    });
  }

  // 检查是否有浮层处于打开状态
  isOverlayOpen(): boolean {
    return !!this.activeOverlayRef && this.activeOverlayRef.hasAttached();
  }
}

2. 在组件A中注入服务并保存OverlayRef

import { Component } from '@angular/core';
import { Overlay, ComponentPortal } from '@angular/cdk/overlay';
import { OverlayManagerService } from './overlay-manager.service';
import { YourOverlayComponent } from './your-overlay.component';

@Component({
  selector: 'app-component-a',
  template: '<button (click)="openOverlay()">打开浮层</button>'
})
export class ComponentA {
  constructor(
    private overlay: Overlay,
    private overlayManager: OverlayManagerService
  ) {}

  openOverlay(): void {
    const overlayRef = this.overlay.create();
    const portal = new ComponentPortal(YourOverlayComponent);
    overlayRef.attach(portal);
    // 将实例存入全局服务
    this.overlayManager.setActiveOverlay(overlayRef);
  }
}

3. 在组件B中注入服务并检查状态

import { Component } from '@angular/core';
import { OverlayManagerService } from './overlay-manager.service';

@Component({
  selector: 'app-component-b',
  template: '<button (click)="doAction()" [disabled]="isOverlayOpen()">执行操作</button>'
})
export class ComponentB {
  constructor(private overlayManager: OverlayManagerService) {}

  get isOverlayOpen(): boolean {
    return this.overlayManager.isOverlayOpen();
  }

  doAction(): void {
    if (!this.isOverlayOpen()) {
      // 执行你的业务逻辑
    }
  }
}

额外优化建议 #

• 若需支持多浮层并存，可将服务中的activeOverlayRef改为数组，统一管理所有打开的浮层实例。
• 可在服务中添加closeActiveOverlay()方法，封装浮层关闭逻辑，减少重复代码。

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