如何在 Angular 中更改 mat-dialog 的 Z-Index答案

【问题标题】：How can i change the Z-Index of mat-dialog in Angular如何在 Angular 中更改 mat-dialog 的 Z-Index
【发布时间】：2021-11-17 22:26:33
【问题描述】：

我的应用程序使用多个 mat-dialogs，有时可能会同时显示 2 个，这会导致问题，因为第二个永远不会正确显示，因为它的模式使应用程序无用。经过更多研究后，我似乎可以通过

调整 mat-dialog 的 z-index

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

}

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

【问题讨论】：

也许使用对话框不是适合您的情况的解决方案。考虑别的？听起来你想让香肠变成鸡，但事实并非如此。最后安装的对话框应该在顶部，这就是对话框的工作方式。
对话框不好用，我尽量不使用它们。由于没有对话框，该网站更容易测试并且更适合移动设备。所以我的网站很少有 1 个可见的对话框，而从来没有 2 个可见的对话框，你应该考虑不同的路径。
它在哪里说你不能在一个页面上有多个 mat-dialog 的？如果是这样，请告诉我。

标签： angular angular-material mat-dialog

【解决方案1】：

打开对话框时，您可以将MatDialogConfig 提供给open 方法。 config 的一个属性是panelClass。因此，在您的全局样式中，您可以拥有一个将更改 z-index 的类，前提是该类通过配置应用于模态。

styles.css

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

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

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

还可以考虑从您的样式中删除!important，这通常会在将来给样式的可维护性带来问题。

【讨论】：