Angular调用子组件方法报Cannot read properties of undefined如何解决

1. 未在父组件模板中声明对应的模板引用变量 #

你在@ViewChild中指定了选择器matGrid，需要确保父组件的模板文件里，引用子组件的位置加上了#matGrid的模板引用标记，示例如下：

<!-- 父组件模板代码 -->
<app-mat-table #matGrid></app-mat-table>

2. Angular 8+ 版本缺少@ViewChild的配置项 #

Angular 8及以上版本使用@ViewChild时必须传入第二个配置参数，明确静态查询规则：

• 如果子组件没有被*ngIf/*ngSwitch等结构指令控制渲染、初始加载就存在，配置为{static: true}
• 如果子组件是条件渲染的，配置为{static: false}
  修正后的父组件代码：

import {MatTableComponent} from './mat-table/mat-table.component'
// 新增第二个配置参数
@ViewChild('matGrid', { static: false }) matGrid: MatTableComponent;

onReload(){
    console.log('User clicked Reload');
    // 增加非空判断避免条件渲染场景下的报错
    this.matGrid?.onReload()
}

3. 调用时机早于子组件初始化完成 #

如果调用逻辑不是用户点击触发、而是写在生命周期函数中：

• 不要在ngOnInit中调用ViewChild绑定的子组件方法，此时视图还未完成初始化，子组件实例还未绑定
• 请将初始化调用逻辑放在ngAfterViewInit生命周期函数中执行

4. 条件渲染场景下子组件未完成挂载 #

如果子组件被*ngIf包裹，点击触发时要确保*ngIf的判断条件已经为true，子组件已经完成渲染，才能获取到子组件实例。

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