在Angular中实现ControlValueAccessor时,为什么需要在writeValue
我已经实现了以下组件.它的工作和行为符合预期.然而,由于ControlValueAccessor的实现对我来说是新的,我不得不在
follow a blog而不了解几个部分的更深层细节.所以这是一种“它有效,但为什么?!”情况.
@Component({ selector: ...,templateUrl: ...,styleUrls: ...,providers: [{ provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => InputTextComponent),multi: true }] }) export class InputComponent implements ControlValueAccessor { constructor() { } @Input() info: string; onChange: any = () => { } onTouch: any = () => { } writeValue(input: any): void { this.info.value = input; // this.onChange(input); // this.onTouch(); } registerOnChange(_: any): void { this.onChange = _; } registerOnTouched(_: any): void { this.onTouch = _; } setDisabledState?(state: boolean): void { } onEdit(value: string): void { this.onChange(value); } } 当我使用它时,我注释掉了writeValue(…)方法的第二和第三行,并且据我所知,没有任何内容破坏. other blogs也一直建议这些电话,所以我确信省略它们是不恰当的.但是,我不相信魔法,宁愿有一个具体的理由去做事. 为什么在writeValue(…)中执行对onChange(…)和onTouch(…)的调用很重要?会出现什么问题,在什么情况下可以预料到? 作为一个副作用,我也尝试评论the other methods并发现当我删除setDisabledState(…)时我无法告诉任何香蕉.什么时候可以预期会导致问题?它是否真的需要实现(我已经在括号前后看到带有问号的版本,参数如下:setDisabledState?(state:boolean):void {}但是也像这样:setDisabledState(state:boolean)? :void {}). 解决方法
阅读这篇文章,详细解释ControlValueAccessor:
> Never again be confused when implementing ControlValueAccessor in Angular forms 如果组件应该用作Angular表单的一部分,通常需要在组件上实现ControlValueAcceessor接口.
这可能是因为您没有应用任何表单指令 – formControl或ngModel将FormControl链接到您的自定义输入组件. FormControl使用InputComponent的writeValue方法进行通信. 以下是我在上面引用的文章中的图片: formControl使用writeValue方法将值设置为本机表单控件. formControl使用registerOnChange方法来注册每次更新本机表单控件时预期会触发的回调. registerOnTouched方法用于指示用户与控件交互.
这是实现ControlValueAcceessor的自定义控件通知Angular的FormControl输入中的值已更改或用户与控件交互的机制.
如界面中所指定,当控件状态更改为“DISABLED”或从“DISABLED”更改时,此函数由表单API调用.根据值,它应启用或禁用适当的DOM元素.如果您希望在关联的FormControl的状态被禁用时收到通知,然后您可以执行一些自定义逻辑(例如,禁用您的输入组件),则需要实现它. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |