ngModel实现双向数据绑定

一、ngModel

1-1、在app.module.ts中配置

import {FormsModule} from '@angular/forms'
@NgModule({
  ...
  imports: [
    ...
    FormsModule
  ],
  ...
})

1-2、组件.html文件

<input type="text" [(ngModel)] = "msg" />
<p>{{msg}}</p>

1-3、组件.ts文件

export class HeaderComponent implements OnInit {
  public msg:string = 'hello world'
  constructor() { }
  ngOnInit() {
  }
}

二、(change)

<input type="text"
(change)="handleChange($event)"
 [(ngModel)]="msg">
handleChange(e){
  console.log(e.target)
}

三、(ngModelChange)

只要ngModel依赖的值改变的时候,就会触发
ngModel一定要写在ngModelChange的前面
<input type="text"
 [(ngModel)]="msg"
 (ngModelChange)="handleChange()"
 >
<p>{{msg}}</p>
<input type="checkbox" 
[(ngModel)]="checked"
(ngModelChange)="inputChange()"
>