Angular中MatDialog删除确认对话框不弹出仅追加到页面底部如何解决

问题原因 #

这个问题本质是Angular Material对话框的依赖配置或样式加载异常，导致组件没有被正确赋予弹窗定位相关的样式，只能作为普通DOM节点被插入到页面底部，常见触发原因如下：

• 未正确引入Angular Material的预设主题，MatDialog的遮罩、浮动定位、层级样式都依赖主题内置样式
• 对话框组件DeleteBoxComponent缺失@Component装饰器，或者未在所属模块完成正确注册
• 自定义样式或backdropClass配置冲突，覆盖了MatDialog的默认定位属性
• Angular 8及更早版本未将对话框组件注册到模块的entryComponents数组中

修复方案 #

1. 引入Angular Material主题 #

打开angular.json，在build配置的styles数组中加入预构建主题，示例如下：

{
  "build": {
    "options": {
      "styles": [
        "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
        "src/styles.scss"
      ]
    }
  }
}

也可以直接在全局样式文件styles.scss中导入主题：

@import "@angular/material/prebuilt-themes/indigo-pink.css";

2. 补全组件装饰器、完成模块注册 #

首先检查DeleteBoxComponent的ts文件，补全顶部的@Component装饰器：

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
// 其他导入

@Component({
  selector: 'app-delete-box',
  templateUrl: './delete-box.component.html',
  styleUrls: ['./delete-box.component.scss']
})
export class DeleteBoxComponent implements OnInit {
  // 原有业务代码
}

然后在所属模块的NgModule配置中完成注册，同时确保导入了MatDialogModule：

import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { BooksComponent } from './books.component';
import { DeleteBoxComponent } from './delete-box.component';

@NgModule({
  declarations: [
    BooksComponent,
    DeleteBoxComponent
  ],
  imports: [
    // 其他依赖模块
    MatDialogModule
  ],
  // Angular 8及更早版本需要添加以下配置，Angular 9+使用Ivy编译器可省略
  entryComponents: [DeleteBoxComponent]
})
export class BooksModule {}

3. 排查样式冲突 #

临时删除dialog.open配置中的backdropClass: 'backdropBackground'参数测试弹窗是否正常显示，如果恢复正常则说明自定义的backdropBackground样式存在冲突，可调整自定义样式避免覆盖mat-dialog-container的position: fixed、z-index等核心属性。
也可以打开浏览器开发者工具，检查页面底部的对话框元素样式，确认mat-dialog-container的定位属性是否被异常覆盖。

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