Angular双向绑定简单理解

在使用Antd的时候，一直很好奇里面的双向绑定的自定义组件是怎么做的。

因为之前一直用，没有去细看文档。

今天抽空来简单的撸一下。

在ng中，()是单向数据流，从视图目标到数据源，[()]这样就是双向绑定了。简单的说就是ng给的一个语法糖，帮我们做了子组件内部事件发射的事件监听，然后赋值。

子组件：html

<input placeholder="test" type="text" [(ngModel)]="qc" #qq (ngModelChange)="testevent()">

子组件:ts

@Component({
  selector: 'app-qingcheng',
  templateUrl: './qingcheng.component.html',
  styleUrls: ['./qingcheng.component.less']
})
export class QingchengComponent implements OnInit {
 
  @Input() username: string;
  @Output() usernameChange = new EventEmitter();
 
  constructor() { }
 
  ngOnInit() {
 
  }
  testevent() {
    console.log(this.username);
    this.usernameChange.emit(this.username);
  }
 
}　　　　

向外部发射事件的时候，一定要xxxChange，以Change结尾的事件才正确，不然无法双向绑定。。

这个坑找了半天才解决：https://segmentfault.com/a/1190000016651999

父组件：html

<app-qingcheng #qingcheng  [(qc)]="testbind"></app-qingcheng>
{{testbind}}

父组件：ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'qctest';
  testbind = '';
 
}