我如何更改 Angular 中 mat-dialog 的 Z-Index

Question

我的应用程序使用多个垫对话框，有时可能会同时显示 2 个，这会导致问题，因为第二个对话框永远不会正确显示，而且它的模态使应用程序无法使用。经过更多研究后，我似乎可以通过

调整 mat-dialog 的 z-index

.cdk-overlay-container {
z-index: 500 !important;

}

但这不会解决我的问题，因为它会将所有的 z-index 更改为 500。我的问题是如何仅更改某些 mat-dialogs 的 Z-index。例如，我所有的基本对话框都可以是一个 z-index，因为它们永远不会同时显示，然后我有一些对话框会提醒或警告必须超越这些基本对话框的用户。使其在一定程度上可由用户配置的最佳方法是什么？

Answer 1

打开对话框时，您可以将 MatDialogConfig 提供给 open 方法。一个属性配置是 panelClass。所以在你的全局样式中，你可以有一个 class 来改变 z-index，只有当 class 通过配置应用到模态时。

styles.css

.warning-dialog {
    z-index: 500 !important;
}

然后在打开对话框时，您可以在配置中传递 class 名称：

this.dialog.open(
    YourComponent,
    {
        panelClass: 'warning-dialog'
    }
);

同时考虑从您的样式中删除 !important，这通常会在将来造成样式可维护性方面的问题。

我如何更改 Angular 中 mat-dialog 的 Z-Index

How can i change the Z-Index of mat-dialog in Angular

angular

angular-material

mat-dialog