如何防止MatDialog在外部单击时关闭

import { MatDialog } from '@angular/material/dialog';

constructor(public dialog: MatDialog) {}

openDialog(): void {
  const dialogRef = this.dialog.open(DialogComponent, {
    disableClose: true
  });
}

import { Component, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: 'dialog.component.html',
})
export class DialogComponent {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    event.stopPropagation();
  }
}

<mat-dialog-container class="custom-dialog-container" (click)="onClick($event)">
  <!-- 对话框内容 -->
</mat-dialog-container>

.custom-dialog-container {
  /* 自定义背景层样式 */
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-dialog-container .mat-dialog-content,
.custom-dialog-container .mat-dialog-actions {
  /* 对话框内容和操作按钮样式 */
}

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: 'dialog.component.html',
  styleUrls: ['dialog.component.css'],
})
export class DialogComponent {
  constructor(public dialogRef: MatDialogRef<DialogComponent>) {}

  onClick(event: MouseEvent): void {
    event.stopPropagation();
  }
}