Angular中ViewChild获取子组件实例为undefined的问题

你遇到的@ViewChild获取子组件实例为undefined的核心原因有两点：

1. *ngIf的延迟渲染特性：只有当selectedExperiment && selectedExperiment.projectType === 'xxx'条件完全满足时，对应的子组件才会被挂载到DOM中。ngOnInit执行时，要么selectedExperiment还未赋值，要么赋值后Angular的变更检测尚未触发，DOM还没更新，此时子组件实例根本不存在。
2. @ViewChild的初始化时机：即使到了ngAfterViewInit钩子，如果*ngIf条件仍不成立，子组件实例依然无法被获取。

方案1：手动触发变更检测 #

在给selectedExperiment赋值后，手动调用变更检测让Angular立即更新DOM，之后再调用子组件方法：

import { Component, OnInit, OnDestroy, ViewChild, ChangeDetectorRef } from '@angular/core';
// 导入其他依赖...

export class myComponent implements OnInit, OnDestroy {
  @ViewChild(DefaultChildComponent) defaultChild: DefaultChildComponent;
  @ViewChild(ScenarioChildComponent) scenarioChild: ScenarioChildComponent;
  selectedExperiment: Experiment;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(){
    this.doSomething();
  }

  doSomething(){
    this.selectedExperiment = exp; // 假设此处已获取到exp的值

    // 手动触发变更检测，强制Angular更新DOM
    this.cdr.detectChanges();

    // 使用可选链操作符避免实例不存在时报错
    if(this.selectedExperiment.projectType === ProjectType.Default){
      this.defaultChild?.doSomething();
    } else if (this.selectedExperiment.projectType === ProjectType.Scenario) {
      this.scenarioChild?.doSomething();
    }
  }
}

方案2：监听selectedExperiment的变化 #

如果selectedExperiment是动态更新的（比如从接口获取、用户交互修改），可以通过监听其变化来触发子组件方法调用：

import { Component, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, SimpleChanges } from '@angular/core';
// 导入其他依赖...

export class myComponent implements OnInit, OnDestroy, OnChanges {
  @ViewChild(DefaultChildComponent) defaultChild: DefaultChildComponent;
  @ViewChild(ScenarioChildComponent) scenarioChild: ScenarioChildComponent;
  selectedExperiment: Experiment;

  constructor(private cdr: ChangeDetectorRef) {}

  // 监听selectedExperiment的变化
  ngOnChanges(changes: SimpleChanges) {
    if (changes['selectedExperiment'] && changes['selectedExperiment'].currentValue) {
      this.cdr.detectChanges();
      // 调用子组件方法
      if(this.selectedExperiment.projectType === ProjectType.Default){
        this.defaultChild?.doSomething();
      } else if (this.selectedExperiment.projectType === ProjectType.Scenario) {
        this.scenarioChild?.doSomething();
      }
    }
  }

  ngOnInit(){
    this.doSomething();
  }

  doSomething(){
    this.selectedExperiment = exp; // 假设此处已获取到exp的值
  }
}

方案3：改用[hidden]替代*ngIf（不推荐） #

如果可以接受子组件始终存在于DOM中（仅隐藏不渲染），可以用[hidden]替换*ngIf，这样@ViewChild在ngAfterViewInit后就能获取到实例：

<app-default-child [hidden]="selectedExperiment?.projectType !== 'default'" (newFormEvent)="onExperimentOptionsFormChange($event)"></app-default-child>
<app-scenario-child [hidden]="selectedExperiment?.projectType !== 'scenario'" (newFormEvent)="onExperimentOptionsFormChange($event)"></app-scenario-child>

注意：此方案会保留两个子组件的实例，可能带来不必要的性能开销，仅适合简单场景。

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