Angular 材料覆盖容器的自定义父容器?

问题描述

Angular 材质为各种组件创建覆盖容器，例如它们的菜单、小吃栏和对话框组件.

Angular material creates overlay containers for various components such as their menu, snackbar and dialog components.

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

How can I, in an easy way, decide which element a cdk-overlay-container should be appended to?

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

Currently, it's appended to the body element. So if I trigger full screen mode for any other element than the body element, it won't be seen. Which of course is not what I want.

推荐答案

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

Basically create a class that extends OverlayContainer. Override the getContainerElement method where you return your HTML element which should be appended with the overlay. If needed, You can also override _createContainer method, where you do your own logic to create the element.

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

Finally provide your CustomOverlayContainer class as Token for OverlayContainer like this:

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

看看原始文件.这很简单:OverlayContainer

Just have a look at the origin file. It's quite easy: OverlayContainer

这篇关于Angular 材料覆盖容器的自定义父容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！