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

【问题标题】：How to size Angular CDK overlay backdrop when attaching to component附加到组件时如何调整 Angular CDK 覆盖背景的大小
【发布时间】：2021-08-24 15:27:20
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular angular-cdk

【解决方案1】：

调整cdk-overlay-container 大小的Angular CDK 方法是将您的自定义css 类提供给OverlayConfig，有backdropClass 和panelClass 属性。

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

【讨论】：

哇，非常感谢你，我一直在寻找一种解决方案来改变弹出窗口的 cdk-overlay 样式而不影响其他弹出窗口，谢谢你

【解决方案2】：

对于 MatDialog，您可以使用 backdropClass 属性单独指定背景类。示例：

const dialogRef: MatDialogRef<PopupDialogComponent, any> = this.dialog.open(
  PopupDialogComponent,
  {

    id: "dialog",
    width: "470px",
    height: "12rem",
    autoFocus: false,
    disableClose: true,
    backdropClass: 'Your-css-class-for-backdrop',
    data: {
      isDeleteWorkcell: true,
      ErrorMessage: "",
      deleteMsg: "Permanently remove from “Shared with me”?",
      deleteHeader: "Remove Sharing",
      deleteBtnTxt: "Yes, remove"
    }
  }
);

【讨论】：