能否同时打开多个Mat-Dialog并实现弹窗层级叠加正常展示

Angular Material 的 mat-dialog 原生支持叠加展示多个模态弹窗，你遇到的第二层弹窗不显示、仅底层编辑弹窗失活的问题，通常是弹窗挂载容器或层级配置异常导致的，可通过以下步骤修复：

1. 打开第二层弹窗时指定当前编辑弹窗的视图容器 #

这是最常见的问题原因：默认情况下第二层弹窗会挂载到根节点的overlay容器，如果你自定义过根容器的层级规则，就可能出现被底层弹窗遮挡的情况。你需要在编辑弹窗组件内部注入当前组件的ViewContainerRef，打开确认弹窗时传入配置项，保证第二层弹窗挂载在当前编辑弹窗的DOM层级之上，z-index会自动递增：

import { Component, ViewContainerRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';

@Component({
  selector: 'app-edit-dialog',
  templateUrl: './edit-dialog.component.html'
})
export class EditDialogComponent {
  constructor(
    private dialog: MatDialog,
    // 注入当前编辑弹窗的视图容器实例
    private viewContainerRef: ViewContainerRef
  ) {}

  // 编辑弹窗关闭触发逻辑
  handleCloseAttempt() {
    // 你的未保存数据判断逻辑
    if (this.isDataUnsaved()) {
      this.dialog.open(ConfirmDialogComponent, {
        // 关键配置项：指定挂载容器为当前编辑弹窗的容器
        viewContainerRef: this.viewContainerRef,
        width: '360px',
        disableClose: true
      }).afterClosed().subscribe(confirmRes => {
        if (confirmRes) {
          // 用户确认丢弃，执行编辑弹窗关闭逻辑
        }
      })
    }
  }
}

2. 检查全局z-index自定义配置 #

如果你在全局样式表中手动覆盖了.mat-dialog-container、.cdk-overlay-pane的z-index固定值，删除对应的配置即可。Angular Material默认会为每一个新打开的弹窗自动递增z-index值，保证上层弹窗正常展示在最顶部。

3. 兜底手动指定层级 #

如果上述配置仍不生效，可以手动为第二层弹窗指定更高层级的自定义样式：

1. 在全局样式中添加自定义类：

.top-confirm-dialog {
  z-index: 1005 !important;
}

2. 打开第二层弹窗时传入自定义类配置：

this.dialog.open(ConfirmDialogComponent, {
  viewContainerRef: this.viewContainerRef,
  panelClass: 'top-confirm-dialog'
})

内容的提问来源于stack exchange，提问作者NoSoup4you