Angular EventEmitter未触发：子组件发射事件父组件无响应

你遇到的问题是自定义组件的@Output事件已触发但父组件未响应，以下是常见的排查方向和解决方法：

1. 检查事件绑定的命名规范 #

Angular官方推荐自定义事件使用烤串式命名（kebab-case），虽然驼峰式（camelCase）在部分场景下也能工作，但模板解析时可能出现兼容性问题。将父组件模板中的事件绑定改为：

(focus-out-event)="test($event)"

同时保持子组件的@Output属性名不变：

@Output() focusOutEvent = new EventEmitter<any>();

2. 确认组件的导入/声明是否正确 #

• 如果是独立组件：父组件的@Component装饰器中必须在imports数组里导入子组件InputFormComponent

  @Component({
    selector: 'app-custom-form',
    templateUrl: './custom-form.component.html',
    standalone: true,
    imports: [InputFormComponent] // 必须添加这一行
  })
  

• 如果是NgModule架构：确保子组件已被添加到所在模块的declarations数组中，且父组件所在模块已导入该子模块（或直接声明子组件）

3. 验证EventEmitter的导入与实例化 #

确保子组件中正确导入了EventEmitter和Output：

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

避免因未导入导致的隐性错误（部分情况下不会抛出明显报错，但事件无法正常传递）

4. 调整事件监听的目标（可选优化） #

当前你监听的是组件宿主元素的focusout事件，若宿主元素（如div）默认不可聚焦，可能存在事件触发不稳定的情况。建议直接监听内部输入框的focusout事件：

• 在input-form.component.html中：

  <input (focusout)="myFocusOutFunction($event)" />
  

• 在input-form.component.ts中：

  myFocusOutFunction(event: Event){
    console.log('myFocusOutFunction is triggered');
    this.focusOutEvent.emit(event);
  }
  

这种方式更直接，能确保事件准确触发。

5. 检查控制台错误信息 #

打开浏览器开发者工具的控制台，查看是否有组件未找到、属性未定义等报错，这些隐性错误可能导致事件绑定失效。

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