Angular学習のControlValueAccessorインターフェースの詳細説明-jsチュートリアル-php.cn

Angular学習のControlValueAccessorインターフェースの詳細説明

青灯夜游

リリース： 2023-03-10 20:03:23

転載

2038 人が閲覧しました

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 の要素で動作することを期待する必要がある場合があります。フォームコントロール通信。現時点では、この目的を達成するには ControlValueAccessor が必要です。

例:

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

ログイン後にコピー

深い理解

ControlValueAccessor の使用方法は、Angular 公式 Web サイトで紹介されており、たくさんの記事がありますが、具体的にはどのように機能するのでしょうか?

Angular には、ネイティブ/カスタムフォームコントロールと formControl ディレクティブをブリッジするための共通メカニズムが必要であり、これはまさに ControlValueAccessor が行うことです。このオブジェクトは、ネイティブフォームコントロールと formControl ディレクティブを橋渡しし、それらの値を同期します。 ControlValueAccessor インターフェイスを実装し、それを NG_VALUE_ACCESSOR として登録することにより、任意のコンポーネントまたはディレクティブを ControlValueAccessor タイプのオブジェクトに変換できます。

実際には、ネイティブフォームコントロールにも ControlValueAccessor に似たインターフェイスがあります。たとえば、Angular がコンポーネントテンプレートで入力またはテキストエリア DOM ネイティブコントロールに遭遇すると、DefaultValueAccessor ディレクティブが使用されます

DefaultValueAccessor#CheckboxControlValueAccessor#NumberValueAccessorinput[type=radio]#input[ type=range]#SelectControlValueAccessorselect[multiple]

#アクセサ	##フォーム要素
##input,textarea
input[type=checkbox]
input[type=number]	##RadioControlValueAccessor
	##RangeValueAccessor
	#select
SelectMultipleControlValueAccessor
以上是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: … }] ログイン後にコピー更多编程相关知识，请访问：编程视频！！