Angular鼠标事件触发子组件重复渲染，如何阻止？

问题分析 #

1. 父组件绑定鼠标事件（mousedown/mouseup/mousemove）后，事件触发会触发父组件的变更检测，默认情况下所有子组件都会跟着执行变更检测，导致WeekRowComponent的@HostBinding getter被频繁调用。
2. 模板中直接调用getFullDayEvents(this.events)作为输入绑定，每次变更检测都会执行该函数，若返回新数组会触发子组件的输入变更，强制重渲染。
3. WeekRowComponent的containerHeight getter未做缓存，每次变更检测都会重复计算，加重性能消耗。

解决方案 #

1. 给子组件启用OnPush变更检测策略

在WeekRowComponent中设置ChangeDetectionStrategy.OnPush，让组件仅在以下场景触发变更检测：

• 输入属性的引用发生变化
• 组件自身触发事件（如点击、输入）
• 显式调用变更检测方法

修改WeekRowComponent代码：

import { Component, Input, HostBinding, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-week-row',
  templateUrl: './week-row.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 新增该行
})
export class WeekRowComponent {
  // ... 原有代码
}

注意：如果父组件更新events时是修改原数组（而非返回新数组），子组件不会触发变更检测。此时需要确保每次更新events都返回新数组，或者在子组件的*ngFor中使用trackBy优化渲染。

2. 避免模板中直接调用函数，提前计算输入数据

模板中直接调用getFullDayEvents(this.events)会导致每次变更检测都执行该函数，若函数返回新数组，会触发子组件的输入变更。改为在父组件中提前计算并存储结果：

父组件代码：

// 定义属性存储计算后的结果
fullDayEvents: CalendarEvent[] = [];

@Input() set events(value: CalendarEvent[]) {
  // 当原始events变化时，重新计算fullDayEvents
  this.fullDayEvents = this.getFullDayEvents(value);
}

private getFullDayEvents(events: CalendarEvent[]): CalendarEvent[] {
  // 原有逻辑
}

父组件模板修改：

<app-week-row [events]="fullDayEvents"></app-week-row>
<div id="main-canvas" (mousedown)="mouseDownHandler($event)" (mouseup)="mouseUpHandler($event)"
    (mousemove)="mouseMoveHandler($event)">
</div>

3. 缓存@HostBinding的计算结果

WeekRowComponent的containerHeight getter每次调用都会重新计算，可通过缓存优化，仅当rows变化时更新计算结果：

修改WeekRowComponent代码：

export class WeekRowComponent {
  @Input() events: CalendarEvent[] = [];

  private _rows: number = 0;
  private _containerHeight: number = 0;

  // 封装rows属性，变化时更新缓存的高度
  get rows(): number {
    return this._rows;
  }
  set rows(value: number) {
    this._rows = value;
    // 仅当rows变化时重新计算高度
    this._containerHeight = value * 48 / 2;
  }

  @HostBinding('style.height.px')
  get containerHeight(): number {
    // 直接返回缓存值，避免重复计算
    return this._containerHeight;
  }

  // ... 原有代码
}

4. 让鼠标事件在Angular Zone外执行（可选）

如果鼠标事件处理不需要更新组件视图，可以在Zone外监听事件，避免触发父组件的变更检测：

父组件代码：

import { Component, NgZone, OnInit, OnDestroy } from '@angular/core';

@Component({
  // ... 组件元数据
})
export class ParentComponent implements OnInit, OnDestroy {
  private eventListeners: (() => void)[] = [];

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    const canvas = document.getElementById('main-canvas');
    if (!canvas) return;

    // 在Zone外绑定事件
    this.ngZone.runOutsideAngular(() => {
      const mouseDownHandler = this.mouseDownHandler.bind(this);
      const mouseUpHandler = this.mouseUpHandler.bind(this);
      const mouseMoveHandler = this.mouseMoveHandler.bind(this);

      canvas.addEventListener('mousedown', mouseDownHandler);
      canvas.addEventListener('mouseup', mouseUpHandler);
      canvas.addEventListener('mousemove', mouseMoveHandler);

      // 存储清理函数，用于组件销毁时移除监听
      this.eventListeners.push(() => {
        canvas.removeEventListener('mousedown', mouseDownHandler);
        canvas.removeEventListener('mouseup', mouseUpHandler);
        canvas.removeEventListener('mousemove', mouseMoveHandler);
      });
    });
  }

  ngOnDestroy() {
    // 组件销毁时移除事件监听
    this.eventListeners.forEach(cleanup => cleanup());
  }

  private mouseDownHandler(event: MouseEvent) {
    // 事件处理逻辑
    // 如果需要更新视图，需手动触发变更检测或回到Zone内执行
    // this.ngZone.run(() => { /* 更新视图的逻辑 */ });
    // 或者 this.cdRef.detectChanges();
  }

  // ... mouseUpHandler、mouseMoveHandler逻辑
}

注意：如果事件处理中需要更新组件属性并刷新视图，需要手动调用this.ngZone.run()包裹逻辑，或者注入ChangeDetectorRef调用detectChanges()。

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