在使用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 = '';
}