Angular 材质覆盖容器的自定义父容器？答案

【问题标题】：Custom parent container for Angular material overlay container?Angular 材质覆盖容器的自定义父容器？
【发布时间】：2019-05-21 03:54:39
【问题描述】：

Angular 材质为各种组件创建覆盖容器，例如菜单、快餐栏和对话框组件。

我怎样才能以一种简单的方式决定应该将 cdk-overlay-container 附加到哪个元素？

目前，它被附加到 body 元素。因此，如果我为 body 元素以外的任何其他元素触发全屏模式，它将不会被看到。这当然不是我想要的。

【问题讨论】：

这是我一直在使用的解决方案：blog.bbogdanov.net/post/…

标签： angular angular-material

【解决方案1】：

基本上创建一个扩展OverlayContainer 的类。覆盖 getContainerElement 方法，在该方法中返回应附加覆盖的 HTML 元素。如果需要，您还可以覆盖 _createContainer 方法，您可以在其中执行自己的逻辑来创建元素。

最后提供您的CustomOverlayContainer 类作为OverlayContainer 的令牌，如下所示：

@NgModule({
    providers: [{provide: OverlayContainer, 
                 useClass: CustomOverlayContainer}],
    // ...
})
export class MyModule { }

看看原始文件。很简单：OverlayContainer

【讨论】：

【解决方案2】：

如果你想改变 mat-dialogue-container 的样式，添加一个面板类并给出样式就足够了，但是如果你想改变 cdk-overlay-container 的样式，那么添加一个 backgroundClass 会有所帮助

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

在组件css中添加

.popupBackdropClass {
  background-color:yellow
}

【讨论】：