javascript - 在回调中输入事件的正确方法

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);
}

我们也可以不指定事件的类型，我不认为这在 typescript 中是一个好的做法。

第三种方式

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

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 就能够只包含与模型相关的逻辑。 您还可以创建一个发出绑定(bind) <input> 的指令如果您不喜欢我建议的方式，请为输出事件添加值