Angular 2 和从客户端到后端的单向绑定

Question

如果我使用方括号，绑定会像这样从后端传递到客户端。

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [value]="name">
</div>

我想要完全相反的，要么单向到后面，要么至少双向绑定。我已经尝试了以下两种方法，但都没有将前面的更改传达给后面的私有字段。

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" (change)="name">
</div>

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(change)]="name">
</div>

我错过了什么？

目的是让输入框为空（因此显示占位符的值），并且一旦用户输入内容，就可以访问后面的值。

我想我可以使用标记并通过@viewChild 引用组件。我也可以在 (change)=updateName($event) 上触发一个事件，但在我看来，这两者都有些老套，而不是最佳实践。

Answer 1

使用[(ngModel)] 而不是[(change)]

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(ngModel)]="name">
</div>

这提供了双向绑定。这意味着输入字段将显示name的值，但同时在用户输入字段时更新name。

在组件中初始化name='';，就会有你想要的效果了。

如果需要触发函数nameChanged()，加ngModelChange

<div>
  <span>Name</span>
  <input type="text" placeholder="Konrad" [(ngModel)]="name" (ngModelChange)="nameChange()">
</div>

参考：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding（搜索 ngModel）