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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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"
    }
  }
);