Angular中EventEmitter.emit日志输出undefined问题求助

核心问题总结 #

• 双向绑定事件命名不规范：Angular双向绑定[(x)]要求输出事件必须为xChange，你的子组件用了hoursTyped/minutesTyped，导致父组件无法接收更新值。
• 错误的console.log目标：EventEmitter.emit()返回void，你打印的是方法返回值而非发射的数值，所以显示undefined。
• 输入值类型不匹配：输入框的$event.target.value是字符串类型，直接赋值给number类型的变量会导致类型异常（比如空值转成NaN）。

分步解决方案 #

1. 修正双向绑定的输出事件名 #

Angular的双向绑定语法是语法糖，等价于[x]="value" (xChange)="value=$event"。需要把输出事件名改为hoursChange和minutesChange：

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

@Component({
    selector: 'app-hours-and-minutes-selector',
    templateUrl: './hours-and-minutes-selector.component.html',
    styleUrls: ['./hours-and-minutes-selector.component.scss']
})
export class HoursAndMinutesSelectorComponent {

    public hoursRegEx = '^[0-9]{0,3}$';
    public minutesRegEx = '^([0-9]|[0-5][0-9])$';
    @Input() public hours: number;
    @Input() public minutes: number;
    // 修正输出事件名，直接在声明时初始化
    @Output() public hoursChange = new EventEmitter<number>();
    @Output() public minutesChange = new EventEmitter<number>();

    public hoursInputBlur(hoursStr: string): void {
        // 处理字符串转数字，空值设为0
        let hours = hoursStr ? parseInt(hoursStr, 10) : 0;
        // 限制在0-999范围内（符合正则规则）
        hours = Math.max(0, Math.min(999, hours));
        this.hours = hours;
        this.hoursChange.emit(this.hours);
        // 打印实际发射的数值，而非emit方法的返回值
        console.log('发射的hours值:', this.hours);
    }

    public minutesInputBlur(minutesStr: string): void {
        let minutes = minutesStr ? parseInt(minutesStr, 10) : 0;
        // 限制在0-59范围内（符合正则规则）
        minutes = Math.max(0, Math.min(59, minutes));
        this.minutes = minutes;
        this.minutesChange.emit(this.minutes);
        console.log('发射的minutes值:', this.minutes);
    }

}

2. 修正方法参数类型匹配 #

输入框的$event.target.value本质是字符串，所以TS方法的参数要改为string类型，确保类型转换逻辑正确（模板代码无需修改）。

3. 验证父组件双向绑定 #

父组件的[(hours)]和[(minutes)]现在可以正常工作，因为子组件的输出事件名符合Angular双向绑定规范，父组件的model.overTimeHours和model.overTimeMinutes会自动接收子组件发射的数值。

为什么之前会出现undefined？ #

• 你执行console.log(this.hoursTyped.emit(hours))时，emit()方法本身没有返回值（返回void），所以打印结果必然是undefined，这和你发射的数值是否正确无关。
• 由于输出事件名不符合双向绑定规范，父组件无法接收到子组件发射的值，导致看起来像是“emit后值为undefined”，但实际上子组件内部的this.hours是有值的，只是父组件没收到。

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