如何强制Angular不执行变更检测？

我希望实现一个可执行同步/异步任务的函数，且任务完成后不会触发变更检测，该函数通过UI中的按钮点击触发。

模板文件 #

<button (click)="onClick()">Click me</button>
<p>{{ message }}</p> 

我的尝试及问题 #

尝试1：使用NgZone.runOutsideAngular() #

尝试用runOutsideAngular()在Angular外部执行代码以跳过变更检测：

message:string = '';
constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}

onClick() {
    this.ngZone.runOutsideAngular(() => {
      this.message = 'Message updated outside Angular zone';
      console.log('Message updated');
    });
}

预期修改message后UI不会更新，只有手动调用ChangeDetectorRef才会更新，但实际UI还是自动更新了。

尝试2：使用ChangeDetectorRef.detach()和reattach() #

onClick() {
      this.cdr.detach();
      this.message = 'Message updated outside Angular zone';
      console.log('Message updated');
      this.cdr.reattach();
}

同样未达到预期，UI依然自动更新了。

我使用的Angular CLI版本为^18.0.1，同时正在学习NgZone如何辅助Angular进行变更检测。

解决方案及原因分析 #

为什么之前的尝试失败？ #

1. runOutsideAngular()的问题：按钮点击事件本身是在Angular Zone内触发的，点击事件的回调执行完毕后，Angular会自动执行一次变更检测，所以哪怕你在runOutsideAngular()里修改了属性，最终还是会触发UI更新。
2. detach()+reattach()的问题：你在修改属性后立即调用了reattach()，此时当前点击事件的上下文还未结束，Angular会在事件循环结束时执行变更检测，所以UI还是会更新。

正确实现方式 #

方式1：用runOutsideAngular()包裹整个点击逻辑

将整个onClick的处理逻辑移到Angular Zone外部，避免点击事件触发变更检测：

message:string = '';
constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}

onClick() {
  this.ngZone.runOutsideAngular(() => {
    // 同步任务
    this.message = 'Message updated outside Angular zone';
    console.log('Message updated');

    // 模拟异步任务
    setTimeout(() => {
      this.message = 'Async message outside zone';
      console.log('Async message updated');
    }, 1000);

    // 如需手动更新UI，取消注释以下代码之一
    // this.ngZone.run(() => this.cdr.markForCheck()); // 标记为需要变更检测，在下一次周期执行
    // this.cdr.detectChanges(); // 立即执行变更检测
  });
}

此时修改message后UI不会自动更新，只有手动调用变更检测方法时才会更新。

方式2：保持ChangeDetectorRef.detach()状态直到需要手动更新

不立即调用reattach()，让组件保持变更检测暂停状态，直到你主动触发更新：

message:string = '';
constructor(private cdr: ChangeDetectorRef) {}

onClick() {
  this.cdr.detach();
  // 同步任务
  this.message = 'Message updated with detached CD';
  console.log('Message updated');

  // 异步任务
  setTimeout(() => {
    this.message = 'Async message with detached CD';
    console.log('Async message updated');
  }, 1000);

  // 如需恢复自动变更检测，可延迟调用reattach
  // setTimeout(() => {
  //   this.cdr.reattach();
  // }, 5000);
}

// 手动触发变更检测的方法
triggerUpdate() {
  this.cdr.detectChanges();
}

此时所有同步/异步任务修改属性都不会触发UI更新，只有调用detectChanges()或reattach()后才会更新。

关于NgZone的补充理解 #

Angular基于Zone.js实现的NgZone会跟踪所有异步操作（如点击事件、定时器、HTTP请求等），当这些操作完成时，Zone会通知Angular执行变更检测。runOutsideAngular()让代码在Angular Zone外运行，其中的异步操作不会触发自动变更检测；而默认情况下，所有Angular相关的事件和异步操作都在Zone内，会自动触发变更检测。

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