为何在Angular模板绑定中使用@ViewChild会抛出ExpressionChangedAfterItHasBeenCheckedError？

问题原因 #

Angular的变更检测流程中，组件初始化渲染时，@ViewChild标注的子组件实例要等到视图初始化完成（ngAfterViewInit钩子阶段）才会被赋值。但模板里的*ngIf="child"会在第一轮变更检测时就读取child的值（此时为undefined），随后child被赋值为子组件实例，导致同一检测周期内表达式值发生变化，触发Angular的严格模式错误。

解决方案 #

方案1：利用生命周期钩子+变更检测标记

通过ngAfterViewInit钩子在视图初始化完成后，更新专门用于控制显示的变量，必要时手动触发变更检测：

import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { Child } from './child.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child, CommonModule],
  template: `    
    <child></child>
    <h1 *ngIf='isChildReady'>Hello!</h1>    
  `,
})
export class App implements AfterViewInit {
  @ViewChild(Child) child: Child | undefined;
  isChildReady = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    // 视图初始化完成后，标记子组件已加载
    this.isChildReady = true;
    // 手动触发变更检测，让Angular接受值的变化
    this.cdr.detectChanges();
  }
}

方案2：使用响应式Observable + async管道

借助@ViewChildren获取子组件列表的Observable，结合async管道让模板自动响应子组件的存在状态，更符合Angular响应式设计：

import { Component, ViewChildren, QueryList, OnInit } from '@angular/core';
import { Child } from './child.component';
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child, CommonModule],
  template: `    
    <child></child>
    <h1 *ngIf='hasChild$ | async'>Hello!</h1>    
  `,
})
export class App implements OnInit {
  @ViewChildren(Child) children: QueryList<Child>;
  hasChild$: Observable<boolean>;

  ngOnInit() {
    // 监听子组件列表变化，同时传入初始状态
    this.hasChild$ = this.children.changes.pipe(
      map(list => list.length > 0),
      startWith(this.children.length > 0)
    );
  }
}

方案3：禁用严格变更检测（不推荐）

虽然可以通过在组件元数据中设置changeDetection: ChangeDetectionStrategy.OnPush或修改全局配置关闭严格模式，但这会绕过Angular的错误检查，可能隐藏其他潜在问题，不建议作为常规解决方案。

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