自定义组件需要实现数据双向绑定
angular中ControlValueAccessor实现model->view,view->model,从而实现的双向绑定
自定义组件需要双向绑定即实现ControlValueAccessor的接口即可
代码
app.component
import { Component, OnInit, Input, forwardRef, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-double',
templateUrl: './double.component.html',
styleUrls: ['./double.component.css'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DoubleComponent),
multi: true
}
]
})
export class DoubleComponent implements OnInit, ControlValueAccessor{
_myvalue: any;
get myvalue() {
return this._myvalue;
}
set myvalue(val) {
this._myvalue = val;
this.propagateChange(val);
}
constructor() { }
ngOnInit() {
}
writeValue(val: object): void {
this._myvalue = val;
}
onchange() {
console.log()
}
propagateChange(val) {
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
}
registerOnTouched(fn: any): void {
console.log('registerOnChange',fn)
}
}
app.component.html
<div >
<input type="text" [(ngModel)]="myvalue">
</div>
解释说明
writeValue
外部传递进来时调用的接口,获取值就可以设置组件的成员属性
registerOnChange
注册一个内部值发生变化时调用的函数,其实真正的目的是将将告诉外部值发生变化的方法传递过来,然后将这个方法保存起来,当内部值发生变化时即调用这个方法,所以propagateChange这个方法只是占位用作,内部实现无所谓。
registerOnTouched
没用到