Angular MatDialog显示空白无报错问题求助

我瞅了下你的代码，发现几个关键问题导致对话框显示空白（而且因为是模板结构/拼写类问题，控制台不会抛出JS错误）：

1. 错误的HTML根标签 #

你的dialog.component.html里包含了完整的<html>标签，这会破坏MatDialog的渲染逻辑——MatDialog的内容应该直接是对话框的内部元素，不需要独立的<html>根节点。

2. 指令拼写错误 #

你写的mat-dialogititle是笔误，正确的Angular Material对话框标题指令是mat-dialog-title，拼写错误会导致标题无法被框架识别渲染。

修复后的代码 #

把dialog.component.html改成下面这样：

<h2 mat-dialog-title>标题</h2>
<mat-dialog-content>
  <p>这是对话框内容</p>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>取消</button>
  <button mat-button (click)="okToDelete()">删除</button>
</mat-dialog-actions>

另外再确认两个细节：

• 你在dress-form.component.html里是否有触发openDeleteDialog()的按钮，比如：

  <button mat-button (click)="openDeleteDialog()">打开删除对话框</button>
  

• 如果你的Angular版本是9及以上，AppModule里的entryComponents其实可以不用声明（不过你已经加了也不会有问题）。

修改完这些后，对话框应该就能正常显示内容了。

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