时间戳

首页 > 解决方案 > 附加到组件时如何调整 Angular CDK 覆盖背景的大小

angular - 附加到组件时如何调整 Angular CDK 覆盖背景的大小

问题描述

我想在特定组件上覆盖 CDK。我使用flexibleConnectedTo()将覆盖的内容部分正确定位在组件上。我不知道如何让覆盖背景只覆盖组件而不是整个页面。该类cdk-overlay-container具有CSS

pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;

我知道我可以覆盖 CSS，但是我正在寻找的是一种 Angular CDK 方法来调整大小cdk-overlay-container以适应组件的边界。

我通读了文档，但是我看不到这样做的方法。我是否遗漏了文档中的某些内容？

标签： angularangular-cdk

解决方案

一种 Angular CDK 的大小调整方式cdk-overlay-container是向OverlayConfig提供您的自定义 css 类，有backgroundClass和panelClass属性。

 let overlayRef = this.overlay.create({
     backdropClass: 'your-custom-overlay-class',
     panelClass: 'your-custom-panel-class'
 });

推荐阅读