Question

角度材料为各种组件（如菜单，小吃栏和对话框组件）创建了覆盖容器。

我如何以一种简单的方式来确定cdk-overlay-container应该附加到哪个元素？

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

Answer 1

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

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

在组件css add中

.popupBackdropClass {
  background-color:yellow
}

Answer 2

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

最后像这样为CustomOverlayContainer提供OverlayContainer类作为令牌：

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

只需查看原始文件即可。这很容易：OverlayContainer

为Angular材质叠加层容器自定义父容器？

2 个答案: