Angular中@HostListener在元素DOM渲染时立即触发的问题排查

这个问题我之前也碰到过，核心原因是Angular的变更检测时机和事件冒泡顺序冲突：

当你点击"Opend my modal"按钮时，open()方法会把isOpened设为true，但Angular并不会立刻更新DOM——它要等到当前事件循环结束后才会执行变更检测，把modal渲染到页面上。而按钮的click事件会顺着DOM树冒泡到document，此时你的指令的document:click监听器已经触发了，这时候modal还没被添加到DOM中，this.el.nativeElement.contains(target)自然返回false，于是立刻触发了appClickOutside事件，调用close()，导致modal刚要显示就被关掉了。

下面给你两种可行的解决方案：

方案1：延迟检测（推荐） #

通过setTimeout把点击外部的判断逻辑放到下一个事件循环中，等Angular完成DOM更新后再执行判断：

import {Directive, ElementRef, EventEmitter, HostListener, Output} from '@angular/core';
@Directive({ selector: '[appClickOutside]' })
export class ClickOutsideDirective {
 @Output() public appClickOutside = new EventEmitter();
 constructor(private el: ElementRef) { }

 @HostListener('document:click', ['$event.target'])
 public onClick(target: HTMLElement) {
  // 延迟到下一个事件循环，等待DOM更新
  setTimeout(() => {
    const isClickedInside = this.el.nativeElement.contains(target);
    if (!isClickedInside) {
      this.appClickOutside.emit(null);
    }
  }, 0);
 }
}

setTimeout(fn, 0)会让代码在当前所有同步任务（包括Angular的变更检测）完成后再执行，这时候modal已经渲染到DOM里了，就能正确判断点击是否在内部。

方案2：阻止按钮事件冒泡 #

在打开按钮的click事件中阻止事件冒泡，避免触发document级别的点击监听：

<button (click)="open(); $event.stopPropagation()">Opend my modal</button>

不过这种方法有个缺点：如果页面上还有其他需要监听document:click的逻辑，这个按钮的事件会被截断，可能影响其他功能，所以更推荐第一种方案。

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