在调用writeValue
方法后,Angular Control View Accessor无法检测到值的变化,是因为它不会自动调用registerOnChange
方法来注册变化检测的回调函数。解决这个问题的方法是手动调用registerOnChange
方法,并在该方法中更新控件的值。
以下是一个示例代码,展示如何解决这个问题:
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: string;
onChange: (value: any) => void;
writeValue(value: any): void {
this.value = value;
}
handleChange(value: string): void {
this.value = value;
this.onChange(this.value); // 手动调用onChange方法
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {}
}
在上述代码中,CustomInputComponent
实现了ControlValueAccessor
接口,并在writeValue
方法中更新了控件的值。在handleChange
方法中,除了更新值之外,还手动调用了onChange
方法来通知控件的变化。
通过以上方法,就可以解决Angular Control View Accessor在调用writeValue
方法后无法检测到值的变化的问题。