Angular使用@ViewChild获取子组件报Cannot read properties of undefined错误

报错产生原因 #

该报错的本质是ngAfterViewInit生命周期钩子执行时，通过@ViewChild查询得到的childElementRef尚未完成赋值，仍然为undefined，读取其childComponentTitle属性时触发了类型错误。常见的触发场景如下：

1. @ViewChild配置与渲染时机不匹配
   Angular 8及以上版本中，@ViewChild装饰器的static属性默认值为false，此时查询结果会在首次变更检测完成后才完成赋值。如果你的子组件被*ngIf、*ngFor这类结构指令包裹，初始加载时没有被渲染，那ngAfterViewInit执行时自然拿不到子组件实例。
   如果你的子组件是固定渲染、没有被任何结构指令控制显隐，可以给@ViewChild手动添加static: true配置，确保实例在视图初始化前就可以访问：

@ViewChild("childRef", { static: true }) childElementRef: any;

2. 模板引用变量拼写错误
   检查父组件模板中子组件上定义的#childRef引用名，和@ViewChild中传入的查询字符串是否完全一致，大小写、拼写错误都会导致查询结果为空。
3. 触发报错的组件与代码不匹配
   你提供的报错日志显示报错发生在PageoneComponent.ngAfterViewInit，但你贴出的父组件类名为BaseComponent，如果二者不是同一个组件，说明PageoneComponent中也声明了同名的@ViewChild查询，但对应模板中没有定义#childRef引用，也会触发该错误。

临时规避方案 #

如果无法确定子组件的渲染时机，可以在访问属性前增加非空判断，避免直接访问undefined的属性抛错：

ngAfterViewInit(): void {
  if (this.childElementRef) {
    this.childComponentTitle = this.childElementRef.childComponentTitle;
  }
}

内容的提问来源于stack exchange，提问作者Reem Al-Assaf