使用ViewChildren与QueryList触发ExpressionChangedAfterItHasBeenCheckedError的解决方法

我需要在子组件添加时更新其CSS类，因此在主组件中通过@ViewChildren获取StringFilterComponent的QueryList：

@ViewChildren(StringFilterComponent) stringFilters: QueryList<StringFilterComponent> | null = null;

由于组件未渲染时QueryList为空，必须在ngAfterViewInit中监听其变化：

ngAfterViewInit(): void {
    this.stringFilters?.changes
    .unsubscribeOnDestroy(this)
    .subscribe((queryList: QueryList<StringFilterComponent>) => {
        queryList.forEach(component => component.class = myCondition ? 'active' : 'inactive');
    });
}

但增删子组件时触发了ExpressionChangedAfterItHasBeenCheckedError异常：

RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked. Previous value for
'class': 'active'. Current value: 'inactive'. Expression location:
_MainComponent component.

我尝试过调整生命周期钩子，但多数钩子中QueryList不可用。请问该方案是否存在问题？如何优雅解决该异常，而非使用detectChanges或setTimeout？

方案存在的问题 #

你直接在QueryList.changes回调里修改子组件的class属性，这个时机处于Angular变更检测周期的后期——Angular已经完成当前组件树的变更检测，此时修改子组件的绑定值会导致子组件状态和Angular已检测的状态不一致，从而抛出错误。

优雅解决方法 #

核心思路是把CSS类的控制逻辑转移到子组件内部，或者通过输入属性规范状态传递时机，避免在变更检测完成后修改值：

1. 通过输入属性传递状态，子组件自行处理类名
   主组件不再直接修改子组件的class，而是给每个子组件传递isActive输入属性：

   // 子组件 StringFilterComponent
   import { Component, Input, ChangeDetectorRef } from '@angular/core';
   
   @Component({
     selector: 'app-string-filter',
     template: `<div [ngClass]="{ active: isActive, inactive: !isActive }">...</div>`
   })
   export class StringFilterComponent {
     @Input() isActive: boolean = false;
     constructor(private cdr: ChangeDetectorRef) {}
   }
   

   主组件在QueryList.changes回调里传递状态，并标记子组件需要变更检测：

   ngAfterViewInit(): void {
       this.stringFilters?.changes
       .unsubscribeOnDestroy(this)
       .subscribe((queryList: QueryList<StringFilterComponent>) => {
           queryList.forEach(component => {
               component.isActive = myCondition ? true : false;
               component.cdr.markForCheck();
           });
       });
   }
   

2. 用数据流驱动状态（推荐）
   如果myCondition是可观察对象，主组件可以把状态流直接传递给子组件，通过async管道自动处理变更时机：

   // 主组件
   import { Observable } from 'rxjs';
   
   activeStatus$: Observable<boolean> = ...; // 你的条件数据流
   
   // 主组件模板
   <app-string-filter [isActive]="activeStatus$ | async"></app-string-filter>
   

   这种方式下Angular会自动同步状态和变更检测，不会触发异常。

3. 调整状态更新时机到变更检测前
   如果必须在主组件控制，可以把更新逻辑放到ngAfterContentChecked钩子，但要注意加判断避免无限循环：

   ngAfterContentChecked(): void {
       if (this.stringFilters && !this.stringFilters.isEmpty) {
           this.stringFilters.forEach(component => {
               component.isActive = myCondition ? true : false;
           });
       }
   }
   

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