Angular - 记录 eventemitter.emit 日志“未定义”

Question

我正在尝试从组件中发出一个数值。 我在它发出之前记录值，它有正确的值。

我指的是我的小时和分钟组件的父组件。

<app-hours-and-minutes-selector [(hours)]="model.overTimeHours"
                                            [(minutes)]="model.overTimeMinutes"></app-hours-and-minutes-selector>

model.overTimeHours 和 model.overTimeMinutes 是数字

小时和分钟组件

<div class="hours-and-minutes-inputs">
    <input class="hours-input header-1"
           inputmode="numeric"
           [appRegexMask]="hoursRegEx"
           placeholder="0"
           (blur)="hoursInputBlur($event.target.value)"
           [value]="hours">
    <span class="big-copy">{{hours | plural : ('time.hour' | translate) : ('time.hours' |
        translate)}}</span>
    <input class="minutes-input header-1"
           inputmode="numeric"
           [appRegexMask]="minutesRegEx"
           placeholder="0"
           (blur)="minutesInputBlur($event.target.value)"
           [value]="minutes">
    <span class="big-copy">{{'shared.minutes-short' | translate}}</span>
</div>

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 hoursTyped: EventEmitter<number>;
    @Output() public minutesTyped: EventEmitter<number>;

    constructor() {
        this.hoursTyped = new EventEmitter();
        this.minutesTyped = new EventEmitter();
    }

    public hoursInputBlur(hours: number): void {
        this.hours = hours;
        this.hoursTyped.emit(this.hours);
        // logs undefined
        console.log(this.hoursTyped.emit(hours));

    }
    public minutesInputBlur(minutes: number): void {
        this.minutes = minutes;
        this.minutesTyped.emit(this.minutes);

    }

}

我试图将初始化移动到我声明 eventemitter 的地方，没有任何区别。

有人可以告诉我哪里错了吗？

Answer 1

为了在父子组件之间共享数据，我们只需要方括号。 所以应该是：

<app-hours-and-minutes-selector [hours]="model.overTimeHours" [minutes]="model.overTimeMinutes"></app-hours-and-minutes-selector>

Answer 2

如果你想从你的事件发射器接收一个值你必须使用事件绑定（只使用括号）因为你的发射器是你的 HoursAndMinutesSelectorComponent 上的一个事件而不是一个数字，同样在父组件上你必须定义一个 function 将接收来自发射器的一个值并设置在你的变量中，最后将发射组件的事件应该被称为等于你的发射器，例如：

Html：

<app-hours-and-minutes-selector (hoursTyped)="onAsignHours($event)"
                                                (minutesTyped)="onAsignNumber($event)"></app-hours-and-minutes-selector>

TS:

onAsignHours(hours: number){this.model.overTimeHours = hours}

请注意，我只使用括号并且事件名称与发射器（值来自的地方）相同，并且我定义了一个新的 function，它将在发出新值时调用并将负责分配来自发射器的值到一个变量。