Angular2 模板中的 DRY 代码？

Question

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

我有一个模板中的片段，其中有一个按钮可以添加输入元素的值，然后清除输入字段（以允许新输入）并重置元素中的焦点，这样您就不会不必经常四处张望：

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

效果很好。问题是，我认为在输入字段中按下回车键也应该像按下 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();

     }

  }

Angular2 模板中的 DRY 代码？

DRY code in Angular2 templates?

angular2-template

angular