在angular中，双向绑定用input框，使用双向绑定的时候需要引入FormModule组件

1 app.module.js配置

  1. import {FormsModule} from '@angular/forms'
  2. ...
  3. imports: [
  4.     ...
  5.     FormsModule
  6.   ],

2 组件中使用

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

数据定义在对应组件的ts中

  1. export class HeaderComponent implements OnInit {
  2.    public msg:string="hello world"
  3. }

3 (change) 点击改变msg

  1. <input type="text" [(ngModel)]="msg" (change)="handleChange($event)">

//ts

  1. handleChange(e){
  2.     console.log(e.target)
  3.  }

4 (ngModelChange) //只要ngModel依赖的值改变，就会触发，即按下键盘就触发

  1. <input type="text" [(ngModel)]="msg" (ngModelChange)="handleChange()">
  2.   //ts
  3.   handleChange(){
  4.      console.log(1)
  5.   }

5 checkbox

  1. tips:[(ngModel)]="msg" 一定要写在(change)="handleChange($event)"的前面
  2. <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="handleChange()">
  3.   //ts
  4. handleChange(){
  5.      console.log(this.checked)
  6.   }