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

Question

Angular 材质为各种组件（例如菜单、小吃栏和对话框组件）创建覆盖容器。

我如何以简单的方式决定 cdk-overlay-container 应附加到哪个元素？

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

Answer 1

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

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

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

只需看一下原始文件即可。这很简单：OverlayContainer