如何为特定Angular MatDialog组件使用自定义Overlay容器

直接在调用MatDialog.open()时，通过配置项的providers参数注入自定义的OverlayContainer，就能让目标Dialog单独使用自定义容器，而不影响全局。

原因说明 #

将CustomOverlayContainer添加到Dialog组件或其父组件的提供者列表无效，是因为MatDialog的Overlay实例是在独立的注入器上下文中创建的，不会继承组件级注入器的提供者配置。

具体实现 #

调用dialog.open时，在选项中传入自定义提供者：

import { OverlayContainer } from "@angular/cdk/overlay";
import { CustomOverlayContainer } from "./path-to-your-custom-container";

// 在打开Dialog的组件中
this.dialog.open(FullScreenSupplyChainDialog, {
  // 其他配置项
  providers: [
    { provide: OverlayContainer, useClass: CustomOverlayContainer }
  ]
});

这样，这个FullScreenSupplyChainDialog的Overlay就会使用你定义的my-custom-overlay-container作为容器，全局的其他Dialog仍会使用默认的cdk-overlay-container。

额外注意 #

• 每次打开该Dialog都会创建一个新的CustomOverlayContainer实例，Dialog关闭时，Angular CDK会自动清理这个容器元素，无需手动处理。
• 确保CustomOverlayContainer的@Injectable()装饰器已正确添加，否则无法被注入。

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