在回调中键入事件的正确方法

Question

两天前我开始研究 Angular，因为我将来可能不得不使用它。

我目前正在研究从子到父的组件通信，我发现了几种方法，在下面的每个示例中，ChildComponent 都有这个属性：

@Output changeSignal : EventEmitter = new EventEmitter<string>();

第一种方式

<input [(ngModel)]='message' (keyup)='handleKeyUp' />

message : string : '';

handleKeyUp() : void {
    this.changeSignal.emit(this.message);
}

这个解决方案让我们使用一个属性，它只用于传递给父级，我不喜欢记住无用数据的想法。

第二种方式

<input (keyup)='handleKeyUp($event)' />

handleKeyUp(event : any) : void {
    this.changeSignal.emit(event.target.value);
    // console.log(event.constructor.name);
}

我们也不能指定事件的类型，我不认为这是打字稿的好习惯。

第三条路

上一个示例中的 console.log() 显示 KeyboardEvent 和 event.target 的类型为 EventTarget，但该类似乎没有定义“值”属性。

handleKeyUp(event : KeyboardEvent) : void {
    // Error in the terminal
    this.changeSignal.emit(event.target.value);
}

'value' 属性是特定于某些 HTMLElement 的，例如 HTMLInputElement，为了防止错误，我们必须对其进行强制转换：

handleKeyUp(event : KeyboardEvent) : void {
    this.changeSignal.emit((<HTMLInputElement>event.target).value);
}

这感觉不太好。

第四条路

<input (keyup)='handleKeyUp($event.target.value) />

HandleKeyUp(inputContent : string) : void {
    this.changeSignal.emit(inputContent);
}

我们让输入标签处理它的特殊性，但是html模板更难阅读并且包含行为，应该在javascript文件中。

您认为四种方法中的哪一种是最佳做法？

Answer 1

你觉得怎么样

<input #nameInput (keyup)="handleKeyUp(nameInput.value)"/>

在 Angular 中，将轻量级 DOM 和事件处理留在模板中（有时在指令中）被认为是一种好习惯，因此您的 ts 将能够仅包含与模型相关的逻辑。 如果您不喜欢我建议的方式，您也可以创建一个指令，将绑定 <input> 值发送到输出事件