Angular 15中自定义OverlayContainer无法渲染MatDialog问题

问题场景 #

在Angular 15中，尝试通过组件级providers覆写OverlayContainer，将MatDialog等浮层元素渲染到组件内部的自定义容器中，但实际浮层仍被追加到document.body，未达到预期效果。

当前代码实现 #

自定义 OverlayContainer 服务

@Injectable()
export class OverlayService extends OverlayContainer{
    constructor(
      @Inject(DOCUMENT) _document: any,
      platform: Platform,
      private elementRef: ElementRef<HTMLElement>
    ) {
      super(_document, platform);
    }

    protected override _createContainer(): void {
      const containerClass = "cdk-overlay-container";
      const container = this._document.createElement("div");
      container.classList.add(containerClass);

      this.elementRef.nativeElement.appendChild(container);
      this._containerElement = container;
    }
}

组件配置

@Component({
  selector: 'app-problem',
  templateUrl: './problem.component.html',
  styleUrls: ['./problem.component.css'],
  providers: [
    DialogServiceService,
    MatDialog,
    { provide: OverlayContainer, useClass: OverlayService },
  ],
})

当前实际DOM结构 #

<body>
  <app-problem></app-problem>
</body>
<div class="cdk-overlay-container">
  <mat-dialog-container></mat-dialog-container>
</div>

预期DOM结构 #

<body>
 <app-problem>
   <div>....</div>
   <div class="cdk-overlay-container">
      <mat-dialog-container></mat-dialog-container>
   </div>
 </app-problem>
</body>

问题原因 #

1. Provider 顺序问题：组件providers中MatDialog的注册顺序早于OverlayContainer的覆写配置，导致MatDialog初始化时注入的是全局OverlayContainer实例，而非自定义的组件级实例。
2. 实例创建时机：Angular 15中MatDialog内部的Overlay初始化逻辑对依赖注入顺序更敏感，晚注册的自定义容器无法被正确复用。

解决方案 #

1. 调整 Provider 注册顺序 #

将OverlayContainer的覆写配置移到MatDialog之前，确保MatDialog初始化时优先注入组件级的自定义容器实例：

@Component({
  selector: 'app-problem',
  templateUrl: './problem.component.html',
  styleUrls: ['./problem.component.css'],
  providers: [
    { provide: OverlayContainer, useClass: OverlayService }, // 优先注册自定义容器
    DialogServiceService,
    MatDialog,
  ],
})

2. 确保 ElementRef 正确注入 #

自定义OverlayService中注入的ElementRef必须指向当前组件的DOM元素，确保服务能将浮层容器挂载到组件内部。如果注入失败，可通过组件实例传递元素引用（比如在组件中通过@ViewChild获取容器元素，再传递给服务）。

3. 可选：通过 Dialog 配置直接指定容器 #

如果上述方式仍不生效，可在打开Dialog时直接通过配置指定容器元素：

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

// 组件内打开Dialog的方法
openCustomDialog() {
  const dialogRef = this.dialog.open(YourDialogComponent, {
    // 直接指定浮层渲染的父容器
    overlayContainer: this.elementRef.nativeElement
  });
}

验证结果 #

调整Provider顺序后，浮层容器会被正确挂载到app-problem组件内部，DOM结构符合预期：

<body>
 <app-problem>
   <div>....</div>
   <div class="cdk-overlay-container">
      <mat-dialog-container></mat-dialog-container>
   </div>
 </app-problem>
</body>

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