Angular服务中的Interval为何会强制触发DOM更新？

这是因为Angular依赖Zone.js追踪异步操作以触发变更检测。

Zone.js会自动修补（patch）浏览器原生的setInterval这类异步API，无论你给setInterval传入的回调函数是否有实际业务逻辑，每次定时器触发时，Zone都会判定有异步操作完成，随即通知Angular执行一轮全局变更检测——这就导致了DOM被强制更新，哪怕没有任何数据发生变化。

如果要避免这种无意义的DOM更新，可以将setInterval放到Angular的NgZone之外执行，示例代码如下：

import { Injectable } from '@angular/core';
import { NgZone } from '@angular/core';
import { WebService } from './web-service'; // 请根据实际路径调整

@Injectable({ providedIn: 'root' })
export class NodeService extends WebService {

  private intervalId: number | undefined;

  constructor(private ngZone: NgZone) {
    super(); // 调用父类构造函数
  }

  public start(frequency: number = 1000): void {
    if (this.intervalId === undefined) {
      this.ngZone.runOutsideAngular(() => {
        this.intervalId = window.setInterval(() => {
          // 若后续需要在回调中触发变更检测，可手动调用：
          // this.ngZone.run(() => {
          //   // 此处编写需要触发变更检测的逻辑
          // });
        }, frequency);
      });
    }
  }
}

这样定时器触发时就不会自动触发全局变更检测，只有当你确实需要更新视图时，再通过ngZone.run()手动触发变更检测即可。

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