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

Question

我想在特定组件上覆盖CDK。我使用flexibleConnectedTo()将叠加层的内容部分正确定位在组件上。我无法弄清楚如何让叠加背景仅 覆盖组件而不是整个页面。 cdk-overlay-container类的CSS为

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

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

我通读了文档，但是没有找到一种方法。我在文档中缺少什么吗？

Answer 1

Angular CDK调整大小cdk-overlay-container的方法是向 OverlayConfig 提供自定义的CSS类，其中有 backdropClass 和 panelClass 属性。

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