在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;
}
Angular 4.x ngModel 双向绑定原理揭秘:https://segmentfault.com/a/1190000009126012