我正在尝试用自定义组件包装ng-select(https://github.com/ng-select/ng-select)组件,我正在使用具有反应形式的ControlValueAccessor,
export class ShNgSelectComponent implements OnInit, OnChanges,
ControlValueAccessor {
@Input() shItems: Array<object>;
@Input() shBindValue: string;
@Input() shBindLabel: string;
@Input() shPlaceholder: any;
@Output() shChange = new EventEmitter<Object>();
ngOnInit() {
}
writeValue(value: any): void {
this.shItems = value || '';
}
propagateChange(event){
this.shChange.emit(event);
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() { }
}
这是sh-ng-select的模板
<ng-select [items]='shItems' [bindValue]='shBindValue' [placeholder]='shPlaceholder' [bindLabel]='shBindLabel' (change)='propagateChange($event)'></ng-select>
这是我要嵌入自定义组件的主要组件
<sh-ng-select [shItems]='manufactureList' [shFormGroup]='requestForm' (shChange)='getModels($event)' formControlName="manufactureId" [shPlaceholder]='"اختر الشركة المصنعة"' [shBindValue]='"id"' [shBindLabel]='"name"'></sh-ng-select>
在我添加formControlName之前,将正常触发shChange事件,但是一旦执行,该事件就不会触发,并且控制台也不会引发任何错误……为什么?
答案 0 :(得分:1)
对我来说,当您添加formControlName时,它将绑定它需要工作的所有内容,因此它将调用registerOnChange,registerOnTouched,writeValue ...,因为他调用了registerOnChange并执行“ this.propagateChange = fn “ propageChange方法将不再引用您定义的方法:
propagateChange(event){
this.shChange.emit(event);
}
因此不再调用shChange事件发射器
有关更多信息,请使使用[[ngModel)] / formControlName的组件重复相同的模式,在这里您可以找到一个简单的实现,可以扩展以在组件中使用: https://github.com/xrobert35/asi-ngtools/blob/master/src/components/common/default-control-value-accessor.ts