如何规避Angular中NG0100信号引发的ExpressionChangedAfterItHasBeenCheckedError错误？

这个错误的核心原因是：Angular完成一轮变更检测后，发现模板绑定的表达式值（也就是你用的showProgressBar信号）在检测结束后又发生了变化。你的场景里，HTTP请求的响应/错误回调大概率刚好落在变更检测周期之后，导致信号更新触发了这个报错。下面是几种可行的规避方案：

方案一：延迟信号更新到下一个微任务队列 #

把信号的增减操作放到queueMicrotask里，让这些变更延迟到下一轮变更检测周期再执行，避免和当前周期的检测逻辑冲突。

修改你的ApiService代码：

showProgressBar = signal(0);

public request(request: object): Observable<any> {
  // 延迟+1操作到下一个微任务
  queueMicrotask(() => {
    this.showProgressBar.update(t => t + 1);
  });

  return this.#_http.post<any>(/* 你的请求地址和配置 */)
    .pipe(
      finalize(() => {
        // 请求完成（成功/失败）后，延迟-1操作
        queueMicrotask(() => {
          this.showProgressBar.update(t => t - 1);
        });
      })
    );
}

方案二：用async管道接管信号的变更检测 #

把信号转换成Observable，在模板里通过async管道绑定，Angular会自动处理变更检测时机，不会出现跨周期变更的问题。

第一步，在ApiService里导出信号的Observable版本：

showProgressBar = signal(0);
// 把信号转为Observable
showProgressBar$ = this.showProgressBar.asObservable();

第二步，修改ApiLoadingComponent的模板：

@if ( (_api.showProgressBar$ | async) > 0 ) {
  <mat-progress-bar mode="query" class="bottomOfScreen"/>
}

方案三：手动触发变更检测（不推荐，仅作备选） #

如果不想改动服务层逻辑，可以在组件里监听信号变化，手动标记组件需要重新检测。不过这种方法需要组件层处理服务的变更，耦合度较高。

修改ApiLoadingComponent：

export class ApiLoadingComponent {
  _api = inject(ApiService);
  private cdr = inject(ChangeDetectorRef);

  constructor() {
    // 监听信号变化，手动触发变更检测
    effect(() => {
      // 访问信号值触发监听
      this._api.showProgressBar();
      this.cdr.markForCheck();
    });
  }
}

推荐优先用方案一或方案二，方案一更贴近你当前的代码结构，方案二更符合Angular响应式编程的最佳实践。

内容的提问来源于stack exchange，提问作者Benoît Dumont