Angular 6中MatDialog不显示灰色背景遮罩且点击外部无法关闭求助

别担心，这两个问题都是MatDialog的常见配置类问题，咱们一步步来搞定：

1. 调整对话框的配置参数 #

默认情况下MatDialog是自带灰色背景遮罩，且允许点击外部关闭的，但可能是你打开对话框时没显式配置相关参数（或者项目里有全局配置覆盖了默认值）。修改你的ngOnInit方法，在open方法里传入MatDialogConfig配置对象：

ngOnInit() {
  this.dialogo.open(CarregandoComponent, {
    hasBackdrop: true, // 强制开启灰色背景遮罩
    disableClose: false // 允许点击对话框外部关闭，同时保留ESC键关闭的功能
  });
}

• hasBackdrop: true：这个属性直接控制背景遮罩的显示，设为true就能让灰色遮罩正常渲染
• disableClose: false：当这个值为false时，点击外部或按ESC都能关闭对话框；你现在ESC能关说明这个值没被设为true，但点击外部无效大概率是配置缺失，显式设置后就能恢复正常

2. 检查主题样式的加载情况 #

如果你已经引入了Angular Material主题，但遮罩还是不显示，得确认主题样式是否正确生效：

• 打开全局样式文件（比如styles.css或styles.scss），确保正确引入了预构建主题，示例代码如下：

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

• 排查是否有自定义CSS覆盖了MatDialog的遮罩样式，比如检查mat-dialog-container或.cdk-overlay-backdrop相关的自定义规则，避免遮罩被隐藏或透明化

验证效果 #

修改完配置后重启应用，应该就能看到灰色背景遮罩，并且点击对话框外部可以正常关闭对话框了。

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