Angular8 如何实现点击外部关闭自定义组件模态弹窗（附Demo）

现有代码结构 #

• 父组件通过*ngIf绑定布尔变量editAdditionalComment，控制自定义评论弹窗app-comment的渲染显隐，对应代码：

  <div *ngIf="editAdditionalComment">
    <app-comment></app-comment>
  </div>
  

• 弹窗组件目前套用了Bootstrap模态框的data-backdrop="static"配置，原生逻辑下点击背景遮罩不会自动关闭弹窗，当前仅绑定了右上角关闭按钮的触发逻辑，对应模板代码：

  <div id="additionalCommentModal" class="dialog-container" keytestdirective (goListingPage)="keyDetails($event)">
    <div class="modal-dialog modal-dialog-centered" data-backdrop="static" role="document">
      <div class="modal-content">
        <div class="modal-header bg-info">
          <h5 class="modal-title text-white">{{editModeData.modeHeader}}</h5>
          <button type="button" class="close font-lg" data-dismiss="modal" aria-label="Close" (click)="cancelChanges()">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h6>Hello Hai</h6>
        </div>  
      </div>
    </div>
  </div>
  

实现逻辑 #

核心是区分点击事件的触发范围：只有点击弹窗外层遮罩时才执行关闭，点击弹窗本身的内容区域时阻止事件冒泡，避免误触发关闭操作。
落地步骤：

1. 给弹窗最外层的遮罩容器绑定点击事件，触发关闭逻辑
2. 给弹窗的实际内容层（.modal-dialog节点）添加点击事件拦截，阻止事件向上冒泡
3. 通过组件的@Output装饰器向父组件传递关闭事件，复用现有显隐状态的控制逻辑

代码修改示例 #

1. 调整弹窗组件（Comment）的模板，新增事件绑定：

   <!-- 外层遮罩层：绑定点击关闭事件 -->
   <div 
     id="additionalCommentModal" 
     class="dialog-container" 
     keytestdirective 
     (goListingPage)="keyDetails($event)"
     (click)="triggerClose()"
   >
     <!-- 内层弹窗内容：阻止点击事件冒泡 -->
     <div 
       class="modal-dialog modal-dialog-centered" 
       data-backdrop="static" 
       role="document"
       (click)="$event.stopPropagation()"
     >
       <div class="modal-content">
         <!-- 原有头部、主体内容代码保持不变 -->
       </div>
     </div>
   </div>
   

2. 调整弹窗组件的TS逻辑，新增对外抛出的关闭事件：

   import { Component, Output, EventEmitter } from '@angular/core';
   
   // 新增输出事件，向父组件传递关闭指令
   @Output() closeModal = new EventEmitter<void>();
   
   // 遮罩层点击触发的关闭方法
   triggerClose() {
     this.closeModal.emit();
   }
   
   // 原有cancelChanges逻辑直接复用，无需重复编码
   cancelChanges() {
     this.closeModal.emit();
   }
   

3. 调整父组件的模板，绑定弹窗抛出的关闭事件，更新显隐状态：

   <div *ngIf="editAdditionalComment">
     <app-comment (closeModal)="editAdditionalComment = false"></app-comment>
   </div>
   

注意：现有代码里的data-backdrop="static"是Bootstrap模态框的原生参数，仅会禁用框架自带的点击关闭行为，和我们手动绑定的DOM事件逻辑互不冲突，不需要删除该配置。

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