從客戶端到后端的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）