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