如何通过单击对话框外部来关闭角度材质对话框

Question

我几个小时以来一直尝试通过单击外部来关闭模式。 单击 X 按钮已经可以工作，但对于外部单击到目前为止没有任何帮助。 我尝试了 hasBackDrop 和其他一些东西，但到目前为止没有任何结果。

打开按钮 TS

<div class="">
  <button (click)="openModal()"/>Open</button>
</div>

打开按钮 HTML

export class NavbarAddFundsComponent{
  constructor(public dialog: MatDialog) {
  }

  openModal(): void {
    const dialogRef = this.dialog.open(AddFundsModalComponent);
  }
}

模态 HTML

<div class="fixed inset-0 flex items-center justify-center">
  <div class="min-w-[90%] lg:min-w-[1000px] h-[600px] bg-nf-500">
    <div class="flex justify-end">
      <button mat-mini-fab autofocus="false" (click)="closeModal()"
              class="mt-3 mr-3 cursor-pointer text-primary-500 font-semibold text-3xl">&times;
      </button>
    </div>
    <div class="relative bottom-2 text-primary-500 text-center font-semibold text-3xl relative">Modal</div>
      <div
        class="w-full lg:w-[350px] h-20 lg:h-[80%] lg:mt-0 mt-5 pt-5 lg:pt-0 lg:ml-4 ml-0 lg:pl-4 pl-0 border-t-2 lg:border-l-2 lg:border-t-0 border-neutral-500">
        <div class="bg-blue-200 w-full h-full"></div>
      </div>
    </div>
  </div>
</div>

模态 TS

export class AddFundsModalComponent implements OnInit {

  constructor(private http: HttpClientService, private fb: FormBuilder, private dialogRef: MatDialogRef<AddFundsModalComponent>) {
  }
  closeModal() {
    this.dialogRef.close();
  }
}

Answer 1

<div class="absolute h-full w-full" (click)="closeModal()">
    <div class="fixed inset-0 flex items-center justify-center">
        <div class="min-w-[90%] lg:min-w-[1000px] h-[600px] bg-nf-500" 
        (click)="handleClick($event)">
.
.
.
        </div>
    </div>
</div>

  closeModal() {
    this.dialogRef.close();
  }

  handleClick(event: Event) {
    event.stopPropagation();
  }