mat Dialog：如何创建 2 个具有不同样式的自定义对话框

Question

我有 2 个组件（每个组件 1 个对话框），我想要一个不透明度为 0 的对话框，以及另一个不透明度为 1 的对话框。 我用这个：

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
}

但它也会影响其他垫子对话框。我能做什么？

Answer 1

当您使用 open 方法打开对话框时，您可以将配置添加到您想要的对话框中。您可以在此处查看所有可用的 MatDialogConfig 属性 - https://material.angular.io/components/dialog/api。

在这种情况下，您可以通过将其添加到配置来创建自定义背景类。

let dialogRef1 = dialog.open(MyDialogComponent, {
  backdropClass: 'backdrop-class-name-1'
});

然后你可以使用 ng-deep 添加你想要的样式。

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    .backdrop-class-name-1 {
      opacity: 0;
    }
  }
}

那么对于另一个对话框，你只需要更改背景类的名称。

let dialogRef2 = dialog.open(MyDialogComponent, {
  backdropClass: 'backdrop-class-name-2'
});

然后应用样式

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    .backdrop-class-name-2 {
      opacity: 1;
    }
  }
}

这样，两个对话框使用ng-deep就不会相互影响了。