Angular2 模板中的干代码？

Question

我喜欢在 angular2 中轻松绑定属性、事件等的方式。您可以将 UI 相关代码放入 html 中并保持组件类非常干净。

我有一个来自模板的片段，其中有一个按钮用于添加输入元素的值，然后清除输入字段（以允许新输入）并重置元素中的焦点，这样您就不必标签很多：

<div><input #newPlayer type="text">
<button type="button" 
(click)="addPlayer(newPlayer.value);newPlayer.value='';newPlayer.focus();">
ADD</button></div>

我的组件代码是这样的：

public addPlayer(name: string) {
    if (!name.length) { return; };

    this.Players.push({ name: name});
}

这效果很好。问题是，我认为在输入字段中按 Enter 键也应该像按 ADD 按钮一样，所以我的新 html 模板如下所示：

<div><input #newPlayer type="text" 
(keyup.enter)="addPlayer(newPlayer.value);newPlayer.value='';newPlayer.focus();">
<button type="button" 
(click)="addPlayer(newPlayer.value);newPlayer.value='';newPlayer.focus();">
ADD</button></div>

必须为额外事件输入相同的命令列表似乎有点过分，所以我想 - 这里最好的模式是什么？我正在考虑这样的事情：

<div><input #newPlayer type="text" 
(keyup.enter)="addPlayer(newPlayer)">
<button type="button" 
(click)="addPlayer(newPlayer)">
ADD</button></div>

然后将我的组件代码更改为如下所示：

public addPlayer(element: any) { // ElementRef?
    if (!element.value?.length) { return; };

    this.Players.push({ name: element.value});
    element.value = '';
    element.focus();
}

我不确定这是否有效，也许我需要参考

Renderer

以及

ElementRef

，这将证实我的怀疑，我不应该这样做。

最佳实践是什么？

Answer 1

看看下面的代码，这可能对你有帮助。

 import {ElementRef,ViewChild} from '@angular/core';

 <input type="text" #newPlayer (keyup.enter)="addPlayer(newPlayer.value)" ... >

在组件中，

export class App{

    @ViewChild('newPlayer') input:ElementRef;

     addPlayer(){
  
       ...

     this.input.nativeElement.value=' ';
     this.input.nativeElement.focus();

     }

  }