Angular 학습의 ControlValueAccessor 인터페이스에 대한 자세한 설명

ControlValueAccessor란 무엇인가요? 왜 사용해야합니까? 다음 기사에서는 Angular의 ControlValueAccessor 구성 요소 인터페이스를 소개합니다. 도움이 되기를 바랍니다.

ControlValueAccessor 이란 무엇인가요?

간단히 말하면 ControlValueAccessor는 Angular의 FormControl 인스턴스와 기본 DOM 요소 사이에 브리지를 만드는 데 사용되는 인터페이스입니다. 사용법은 OnInit과 유사하며 프로그래머가 사용자 정의 구성 요소에서 해당 메서드를 구현해야 합니다.

import {
ControlValueAccessor,
NG_VALUE_ACCESSOR
} from '@angular/forms';

@Component({
    selector: 'custom',
    templateUrl: './custom.component.html',
    styleUrls: ['./custom.component.less'],
    providers: [     
      {
        provide: NG_VALUE_ACCESSOR, 
        useExisting: forwardRef(() => CustomComponent),
        multi: true     
      }   
    ]
})
export class CustomComponent implements ControlValueAccessor, OnInit, {…

ControlValueAccessor를 사용해야 하는 이유

때때로 사용자 정의 양식 요소를 생성하고 Angular의 FormControl과 성공적으로 통신할 수 있기를 바라야 할 수도 있습니다. 현재 이 목적을 달성하려면 ControlValueAccessor가 필요합니다.

예:

this.myForm = new FormGroup({
    userName: new FormControl({value: '', disabled: false})
});

    

                     Name:                           

    

        Submit     

에 대한 심층적인 이해 ControlValueAccessor의 사용법은 Angular 공식 홈페이지와 여러 글에 소개되어 있는데 구체적으로 어떻게 작동하나요?

Angular에는 기본/사용자 정의 양식 컨트롤과 formControl 지시문을 연결하는 공통 메커니즘이 필요하며 이것이 바로 ControlValueAccessor가 수행하는 작업입니다. 이 개체는 기본 양식 컨트롤과 formControl 지시문을 연결하고 해당 값을 동기화합니다. 모든 구성 요소나 지시문은 ControlValueAccessor 인터페이스를 구현하고 이를 NG_VALUE_ACCESSOR로 등록하여 ControlValueAccessor 유형의 개체로 변환할 수 있습니다.

실제로 기본 양식 컨트롤에는 ControlValueAccessor와 유사한 인터페이스도 있습니다. 예를 들어 Angular는 구성 요소 템플릿에서 입력 또는 텍스트 영역 DOM 기본 컨트롤을 발견하면 DefaultValueAccessor 지시문

을 사용합니다. select

Accessor	양식 요소
DefaultValueAccessor	input,textarea
체크박스 컨트롤 ValueAccessor	input[type=checkbox]
NumberValueAccessor	input[유형=번호]
RadioControlValueAccessor	input[유형=라디오]
Ran geValueAccessor	input[유형 =범위] OnSelectControlValueAccessor
	SelectableControlValueAccessor
선택 [복수]	以上是Angular 为所有原生 DOM 表单元素创建的 Angular 表单控件，即内置ControlValueAccessor ControlValueAccessor 接口定义了四个方法： - writeValue(obj：any)：将表单模型中的新值写入视图或DOM属性（如果需要）的方法，它将来自外部的数据写入到内部的数据模型。 - registerOnChange(fn：any)：一种注册处理程序的方法，当视图中的某些内容发生更改时应调用该处理程序。它具有一个告诉其他表单指令和表单控件以更新其值的函数。通常在 registerOnChange 中需要保存该事件触发函数，在数据改变的时候，可以通过调用事件触发函数通知外部数据变了，同时可以将修改后的数据作为参数传递出去。 - registerOnTouched(fn: any)：注册 onTouched 事件，基本同 registerOnChange ，只是该函数用于通知表单组件已经处于 touched 状态，改变绑定的 FormControl 的内部状态。 - setDisabledState(isDisabled: boolean)：当调用 FormControl 变更状态的 API 时得表单状态变为 Disabled 时调用 setDisabledState() 方法，以通知自定义表单组件当前表单的读写状态。 formControl 指令使用 writeValue 方法设置原生表单控件的值；使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数，我们需要把更新的值传给这个回调函数，这样对应的 Angular 表单控件值也会更新；使用 registerOnTouched 方法来注册用户和控件交互时触发的回调。 formControl会调用名为setUpControl的函数，ControlValueAccessor的实例valueAccessor会被作为参数传入这个函数中。在setUpControl中，ControlValueAccessor的四个方法会在交互时被调用，以完成formControl和元素之间的通信。 拓展： 在使用ControlValueAccessor时需要一同引入NG_VALUE_ACCESSOR，它是使用InjectionToken 创建的可在 Provider 中使用的 Token。我们在编写自己的项目时一般不需要用到InjectionToken，但是在一个框架或者第三方的插件中，它就变得十分有必要了。 export const NG_VALUE_ACCESSOR =     new InjectionToken<readonlyarray>>('NgValueAccessor');</readonlyarray> 试想当我使用依赖注入的功能时，我需要将我创建的依赖注册进组件中。这时我就需要一个令牌，如果我使用一个字符串作为令牌就有可能会造成重复，相同的令牌会导致后面的覆盖前面的。所以需要一个Token作为一个唯一值来防止这种冲突。 providers: [{ provide: TOKEN, useValue: … }] 更多编程相关知识，请访问：编程视频！！

위 내용은 Angular 학습의 ControlValueAccessor 인터페이스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!