Angular报错TypeError：无法读取undefined的selectionChange属性，求解决

错误根源 #

报错TypeError: Cannot read properties of undefined (reading 'selectionChange')的核心原因是：StaffManagementComponent中的this.staffManagement变量未被正确初始化，处于undefined状态，因此无法访问其selectionChange事件发射器。

解决步骤 #

1. 给ListStaffComponent添加模板引用 #

在StaffManagementComponent的模板文件（如staff-management.component.html）中，为<app-list-staff>组件添加模板引用变量：

<app-list-staff #staffManagement [simpleView]="yourValueHere"></app-list-staff>

2. 通过@ViewChild获取组件实例 #

在StaffManagementComponent的类文件中，使用@ViewChild装饰器获取模板中的组件实例，并在合适的生命周期钩子中订阅事件：

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { ListStaffComponent } from './path-to-list-staff.component';

export class StaffManagementComponent implements OnInit, AfterViewInit {
  @ViewChild('staffManagement') staffManagement!: ListStaffComponent;
  qcTestSelect: any;

  ngAfterViewInit(): void {
    // 视图初始化完成后再订阅，确保组件实例已存在
    this.staffManagement.selectionChange.subscribe(data => {
      this.qcTestSelect = data;
    });
  }

  // 若需在ngOnInit中订阅，需设置static: true（仅适用于静态渲染的模板元素）
  // @ViewChild('staffManagement', { static: true }) staffManagement!: ListStaffComponent;
  // ngOnInit(): void {
  //   this.staffManagement.selectionChange.subscribe(data => {
  //     this.qcTestSelect = data;
  //   });
  // }
}

3. 额外排查点 #

• 如果staffManagement是通过动态创建、服务注入等方式获取的，必须保证在调用selectionChange.subscribe()之前，该变量已被赋值为ListStaffComponent的有效实例。
• 检查模板中是否正确引入了ListStaffComponent，未出现组件未声明、标签拼写错误的情况。

内容的提问来源于stack exchange，提问作者Khánh Dương Đình