Angular 학습의 ControlValueAccessor 인터페이스에 대한 자세한 설명-JS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2023-03-10 20:03:23

앞으로

2037명이 탐색했습니다.

ControlValueAccessor란 무엇인가요? 왜 사용해야합니까? 다음 기사에서는 Angular의 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})
});

로그인 후 복사

에 대한 심층적인 이해 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: … }] 로그인 후 복사 更多编程相关知识，请访问：编程视频！！