ng4.x 双向数据绑定

在app.module.ts默认只依赖browserModule，如果要使用其他模块先import引入。

---

在属性绑定中，值从模型中流动到视图上的目标属性。[]，通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。

在事件绑定中，值从视图上的目标属性流动到模型。()，通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的（反向的）单向数据绑定。

所以，组合[]和()就可以实现双向数据绑定和双向数据流。

事实上，我们也可以把NgModel绑定拆分成两个独立的绑定，属性绑定和事件绑定。

---

No 1 : 首先引入FormsModule表单模块

import { FormsModule } from '@angular/forms';

No 2 ：注入

@NgModule ({

      imports:[ ..., FormsModule ] 

})

No 3 ： 使用

public search = "请输入搜索内容";

getSearch(){

      alert( this.search);

}

<input type='text' [(ngModel)] = "search" name = "search">

<button (click) = "getSearch()">获取输入框的内容 </button> 

注意：

如何给表单元素监听用户的操作结果？

绑定ngModelChange事件

??

---

---

<input [value] = "name"  (input) = "doOnInput($event)">  {{name}}

doOnInput(event){

      this.name = event.target.value;

}

转自：http://www.cnblogs.com/JennyLin77/p/6141124.html

---

---

---

转自：http://www.cnblogs.com/dennis0525/p/7631301.html

Angular 4.x ngModel 双向绑定原理揭秘：https://segmentfault.com/a/1190000009126012