如何避免Angular指令中的MouseEvent触发变更检测？

在开发Angular项目时，若指令仅需通过mouseenter和mouseleave事件修改宿主元素CSS样式，默认的@HostListener会触发不必要的变更检测。以下是两种可行的优化方案：

方案一：给@HostListener添加ngZone: false配置 #

通过给@HostListener的第三个参数设置{ ngZone: false }，让事件回调运行在Angular的变更检测区域之外，从而避免触发变更检测。

修改后的指令代码：

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

@Directive({
  selector: '[appMouseEvents]',
})
export class MouseEventsDirective {
  constructor(private element: ElementRef) {}

  @HostListener('mouseenter', ['$event'], { ngZone: false })
  onMouseEnter() {
    this.element.nativeElement.style.backgroundColor = '#f0f0f0';
  }

  @HostListener('mouseleave', ['$event'], { ngZone: false })
  onMouseLeave() {
    this.element.nativeElement.style.backgroundColor = 'transparent';
  }
}

说明：该方法简洁高效，直接通过配置参数隔离变更检测，适合仅需简单样式修改的场景。

方案二：使用Renderer2绑定原生事件 #

利用Angular的Renderer2服务绑定原生鼠标事件，这类事件默认运行在NgZone之外，不会触发变更检测。同时需在组件销毁时清理事件监听，防止内存泄漏。

修改后的指令代码：

import { Directive, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appMouseEvents]',
})
export class MouseEventsDirective implements OnInit, OnDestroy {
  private enterListener!: () => void;
  private leaveListener!: () => void;

  constructor(private element: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.enterListener = this.renderer.listen(
      this.element.nativeElement,
      'mouseenter',
      () => {
        this.renderer.setStyle(this.element.nativeElement, 'backgroundColor', '#f0f0f0');
      }
    );

    this.leaveListener = this.renderer.listen(
      this.element.nativeElement,
      'mouseleave',
      () => {
        this.renderer.removeStyle(this.element.nativeElement, 'backgroundColor');
      }
    );
  }

  ngOnDestroy() {
    this.enterListener();
    this.leaveListener();
  }
}

说明：此方法更符合Angular操作DOM的最佳实践，尤其适用于服务端渲染场景，同时能灵活处理复杂DOM操作。

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