Angular 2 - 如何使用局部变量清除输入？

Question

按照Angular2网站的指南,我有这个HTML:

<input #something (keyup)="doneTyping($event)">
<button (click)="add(something .value)">Add</button>

使用此控制器:

@Component({
  selector: 'my-app',
  appInjector: [SomeService]
})
@View({
  templateUrl: 'index-angular',
  directives:[NgFor]
})
class MyAppComponent {
  name: string;
  stuff: Array<string>;

  constructor(someService: SomeService) {
    this.name = 'Angular2Sample';
    this.stuff= someService.getStuff();
  }
  add(st: string){
    this.stuff.push(st);
  }
  doneTyping($event) {
    if($event.which === 13) {
      this.stuff.push($event.target.value);
      $event.target.value = null;
    }
  }
}

当用户点击输入时,doneTyping方法清除输入$event.target.value = null;.

但是按下按钮后,我无法想出同样的方法.

Answer 1

您可以将输入作为参数传递给按钮

<input #something (keyup)="doneTyping($event)">

<!-- Input as paramter -->
<button (click)="add(something)">Add</button>

后来在add功能上

add(st: HTMLInputElement){
    this.stuff.push(st.value);
    st.value = null;
  }

Answer 2

此外，您通常希望尽可能避免与 DOM 交互。我刚刚在 angular2 github 上检查了 Todo 应用程序示例，它们也访问了 DOM 元素，但最后一次真正的提交是 2 个月前的。

如果您使用数据绑定，您可以获得更清晰的代码，这将导致类似以下内容：

<input [value]="_newStuff" (keyup.enter)="addStuff()">
<button (click)="addStuff()">Add</button>

然后在您的类中您可以定义成员_newStuff : string，您可以按如下方式实现 addStuff ：

addStuff() {
    this.stuff.push(_newStuff);
    this._newstuff = '';
}

在大多数情况下，您可能希望 _newStuff 成为一个模型对象，作为如下接口工作：

class Stuff {
    id : any;
    property : any;
    otherProperty : any;
}

然后你的 _newStuff 将是_newStuff : Stuff;，你可以像这样映射它：<input [value]="_newStuff.property" (keyup.enter)="addStuff()">。

我知道你的示例代码非常简单，你只是尝试让它工作，但我相信数据绑定方式更多的是框架的逻辑，而Form API基本上提供了Control、ControlGroup和FormBuilder等工具来帮助您可以使用验证器等将模型映射到视图上。对于更大一点的东西，每次需要更改视图时都访问 DOM 会太麻烦。最后，您的示例几乎是在 Angular2 上下文中执行的原始 JavaScript。

回到您的示例，现在假设您有另一个事件触发要添加的新内容，例如双击左右，您需要添加另一个处理此事件的方法，再次将其传递给 HTMLInputElement，然后基本上执行与在 keyup 事件处理程序上执行的操作相同，因此再次重复代码。通过数据绑定，您的组件拥有视图的状态，因此您可以拥有一种简单的方法，该方法不会受到触发它的事件类型的影响。在那里，您可以测试模型是否有效（即使为此您将使用 Form API）。

无论如何，我知道这个问题已经得到了回答，但我认为鉴于我目前对它的理解以及如何将其应用于实际案例，我认为我只会帮助改进解决方案。