angular - Angular Material 覆盖容器的自定义父容器？

Question

Angular Material 为各种组件创建覆盖容器，例如它们的菜单、 snackbar 和对话框组件。

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

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

Answer 1

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

最后提供您的 CustomOverlayContainer 类作为 OverlayContainer 的 token ，如下所示:

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

只看原始文件。这很简单:OverlayContainer