在Angular中,ControlValueAccessor接口用于创建自定义表单控件,并与ngModel指令进行交互。其中,WriteValue方法用于从父组件向自定义控件写入值。
如果在使用ControlValueAccessor时,写入值后ngModelChange事件没有被触发,可以尝试以下解决方法:
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-custom-input',
template: `
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomInputComponent),
multi: true
}
]
})
export class CustomInputComponent implements ControlValueAccessor {
value: any;
onChange: any = () => {};
writeValue(value: any): void {
this.value = value; // 写入值
this.onChange(value); // 触发ngModelChange事件
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState(isDisabled: boolean): void {}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
customValue: any;
onCustomValueChange(value: any): void {
console.log('ngModelChange event triggered:', value);
}
}
通过以上方法,当通过WriteValue方法写入值到自定义控件时,ngModelChange事件应该会被正确触发,并且在父组件中可以对事件进行处理。