Angular @Output失效：instance[output.propName].subscribe不是函数

Hey，我之前也碰到过这个报错，简直头大！这个问题本质上是Angular找不到合法的EventEmitter实例来订阅事件，我给你梳理几个最常见的原因和解决办法：

1. 子组件未正确初始化@Output为EventEmitter #

这是最容易踩的坑！很多时候我们会忘记把@Output属性实例化成EventEmitter对象，导致Angular没法调用subscribe方法。

错误写法：

// 子组件里只定义了@Output但没实例化
@Output() onEmployeeAdded;

正确写法：
一定要先导入EventEmitter和Output，然后把属性实例化：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-add-employee', // 假设你的子组件选择器是这个
  templateUrl: './add-employee.component.html'
})
export class AddEmployeeComponent {
  // 必须实例化EventEmitter，泛型可以指定你要传递的数据类型
  @Output() onEmployeeAdded = new EventEmitter<Employee>();

  // 当子组件需要触发事件时调用这个方法
  submitEmployee() {
    const newEmployee: Employee = { /* 你的员工数据 */ };
    this.onEmployeeAdded.emit(newEmployee);
  }
}

2. 父组件事件绑定的名称不匹配 #

检查父组件HTML里绑定的事件名，是否和子组件@Output的属性名完全对应（Angular支持小驼峰和短横线分隔的写法，但要一致）。

比如你的父组件里现在有个按钮(click)="onAddEmployee()"，如果这是用来打开子组件的，那你需要在父组件里引入子组件，并绑定它的输出事件：

<h1>Accountmanagement</h1> 
<button class="add" (click)="openAddEmployeeModal()">Add Employee</button>

<!-- 假设你的子组件是弹窗，这里绑定它的输出事件 -->
<app-add-employee 
  *ngIf="showAddModal"
  (onEmployeeAdded)="handleEmployeeAdded($event)"
></app-add-employee>

<table>
  <!-- 表格内容 -->
  <tr> 
    <th>Username</th> 
    <th>E-Mail</th> 
    <th>Discord</th> 
    <th>First Name</th> 
    <th>Forum</th> 
    <th>Gitlab</th> 
    <th>Redmine</th> 
    <th>Gameserver</th> 
    <th>Docu-Server...</th>
  </tr>
</table>

注意这里的(onEmployeeAdded)要和子组件里@Output的属性名完全一致，如果子组件里是@Output() employeeAdded = new EventEmitter();，那父组件就要写成(employeeAdded)="handleEmployeeAdded($event)"。

3. 误把@Input当成@Output使用 #

有时候手滑会把装饰器搞混，写成@Input() onEmployeeAdded = new EventEmitter();，这肯定不行！输出事件必须用@Output装饰器，输入属性才用@Input。

4. 检查子组件是否正确声明在模块里 #

如果子组件没有被添加到模块的declarations数组里，Angular没法识别它的@Output属性，也会导致类似的报错。确保在你的模块里：

@NgModule({
  declarations: [
    AccountmanagementComponent, // 父组件
    AddEmployeeComponent // 子组件
  ]
})
export class YourModule { }

按照上面的步骤排查，基本就能解决这个subscribe is not a function的报错啦！

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