Question

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

我有一个来自我得到的模板的片段，其中我有一个按钮来添加输入元素的值，然后清除输入字段（以允许新输入）并重置元素中的焦点，这样你就不会不得不四处寻找：

<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的引用，这可以证实我怀疑我不应该这样做。< / p>

最佳做法是什么？

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代码？

1 个答案: