Angular对话框外部点击禁用无效，求解决方案

• 先确保正确配置disableClose: true阻止对话框关闭，若主窗口仍有响应，需额外阻止背景点击事件的冒泡：

  const dialogRef = this.dialog.open(DialogComponent, {
    disableClose: true
  });
  
  dialogRef.backdropClick().subscribe((event: MouseEvent) => {
    event.stopPropagation(); // 阻止事件透传到主窗口
    event.preventDefault();
  });
  

• 检查自定义的backdropClass样式，避免设置pointer-events: none这类会导致点击穿透的属性，确保背景层能捕获点击事件：

  .your-custom-backdrop {
    pointer-events: auto;
    /* 其他自定义样式 */
  }
  

• 若上述方法无效，可临时给主窗口添加点击事件拦截，对话框关闭后移除：

  const dialogRef = this.dialog.open(DialogComponent, {
    disableClose: true
  });
  
  const blockMainClick = (event: MouseEvent) => event.stopPropagation();
  document.body.addEventListener('click', blockMainClick);
  
  dialogRef.afterClosed().subscribe(() => {
    document.body.removeEventListener('click', blockMainClick);
  });
  

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