Angular 5中如何阻止点击鼠标关闭Modal弹窗？

Hey Adam! 针对你在Angular 5里想阻止弹窗点击任意位置就关闭的需求，我给你整理了几种常见的实现方式，取决于你用的弹窗组件类型：

情况一：使用Angular Material的MatDialog组件 #

这是Angular项目里最常用的弹窗组件，有两种灵活的实现方式：

1. 全局禁用外部点击和ESC关闭 #

在打开弹窗时，直接配置disableClose参数为true，这样无论点击弹窗外部还是按ESC键，都不会触发弹窗关闭：

import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog.component';

constructor(private dialog: MatDialog) {}

openCustomDialog() {
  const dialogRef = this.dialog.open(MyDialogComponent, {
    disableClose: true, // 关键配置项
    // 可添加其他弹窗配置，比如width、height等
  });
}

2. 仅阻止外部点击，保留ESC关闭功能 #

如果你希望保留ESC键关闭弹窗，但阻止点击外部遮罩关闭，可以监听弹窗的backdropClick事件，在事件触发时不执行关闭逻辑：

openCustomDialog() {
  const dialogRef = this.dialog.open(MyDialogComponent);

  // 监听背景遮罩的点击事件
  dialogRef.backdropClick().subscribe(() => {
    // 这里什么都不做，就不会触发弹窗关闭
    // 要是你需要在特定条件下才允许关闭，也可以在这里加判断逻辑
    // if (someCondition) { dialogRef.close(); }
  });
}

情况二：使用自定义弹窗组件 #

如果是你自己开发的自定义模态框，处理方式如下：

1. 阻止遮罩层的点击事件冒泡 #

通常自定义弹窗会有一个全屏遮罩层，给遮罩层的点击事件添加阻止冒泡的逻辑，避免触发关闭弹窗的父级事件：

<!-- 弹窗模板 -->
<div class="modal-backdrop" (click)="handleBackdropClick($event)"></div>
<div class="modal-content">
  <!-- 弹窗内容区域 -->
</div>

在组件类中实现事件处理：

handleBackdropClick(event: MouseEvent) {
  event.stopPropagation(); // 阻止事件向上冒泡
  // 如果原来的逻辑是点击遮罩就关闭，直接注释掉关闭代码即可
}

2. 精准判断点击区域 #

如果你的弹窗关闭逻辑是通过监听整个文档的点击事件实现的，可以在事件处理中判断点击的元素是否属于弹窗内部，只有点击外部时才不执行关闭：

import { ElementRef, HostListener } from '@angular/core';

constructor(private elementRef: ElementRef) {}

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
  // 判断点击的元素是否在弹窗组件内部
  const isInsideModal = this.elementRef.nativeElement.contains(event.target);
  if (!isInsideModal) {
    // 注释掉原来的关闭弹窗代码，或者添加条件判断
    // this.closeModal();
  }
}

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