ControlValueAccessor 是什么？為什么需要使用 ？下面本篇文章就來帶大家了解Angular中的ControlValueAccessor組件接口，希望對大家有所幫助！

(相關資料圖)

ControlValueAccessor 是什么？

簡單來說ControlValueAccessor是一個接口，它被用于在 Angular 的 FormControl 實例和原生 DOM 元素之間創(chuàng)建一個橋梁。其使用方式和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

有時，你可能需要創(chuàng)建自定義的表單元素，并希望它能和Angular的FormControl成功通信。這時你便需要ControlValueAccessor來實現這個目的。

比如：

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

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">    <div class="form-group">        <label>            Name:            <my-input formControlName="userName"></my-input>        </label>    </div>    <div class="form-group">        <button type="submit">Submit</button>    </div></form>

深入理解

ControlValueAccessor的使用方法在Angular官網和很多的文章中都有介紹，但是它具體是如何起作用的呢？

Angular 需要一種通用機制來橋接原生/自定義表單控件和 formControl 指令，而這正是 ControlValueAccessor 干的事情。這個對象橋接原生表單控件和 formControl 指令，并同步兩者的值。任何一個組件或指令都可以通過實現 ControlValueAccessor 接口并注冊為 NG_VALUE_ACCESSOR，從而轉變成 ControlValueAccessor 類型的對象。

其實原生表單控件也擁有類似于ControlValueAccessor的接口，比如：當 Angular 在組件模板中中遇到 input 或 textarea DOM 原生控件時，就會使用DefaultValueAccessor 指令

以上是Angular 為所有原生 DOM 表單元素創(chuàng)建的 Angular 表單控件，即內置ControlValueAccessor

ControlValueAccessor 接口定義了四個方法：

- writeValue(obj：any)：將表單模型中的新值寫入視圖或DOM屬性（如果需要）的方法，它將來自外部的數據寫入到內部的數據模型。

- registerOnChange(fn：any)：一種注冊處理程序的方法，當視圖中的某些內容發(fā)生更改時應調用該處理程序。它具有一個告訴其他表單指令和表單控件以更新其值的函數。通常在 registerOnChange 中需要保存該事件觸發(fā)函數，在數據改變的時候，可以通過調用事件觸發(fā)函數通知外部數據變了，同時可以將修改后的數據作為參數傳遞出去。

- registerOnTouched(fn: any)：注冊 onTouched 事件，基本同 registerOnChange ，只是該函數用于通知表單組件已經處于 touched 狀態(tài)，改變綁定的 FormControl 的內部狀態(tài)。

- setDisabledState(isDisabled: boolean)：當調用 FormControl 變更狀態(tài)的 API 時得表單狀態(tài)變?yōu)?Disabled 時調用 setDisabledState() 方法，以通知自定義表單組件當前表單的讀寫狀態(tài)。

formControl 指令使用 writeValue 方法設置原生表單控件的值；使用 registerOnChange 方法來注冊由每次原生表單控件值更新時觸發(fā)的回調函數，我們需要把更新的值傳給這個回調函數，這樣對應的 Angular 表單控件值也會更新；使用 registerOnTouched 方法來注冊用戶和控件交互時觸發(fā)的回調。

formControl會調用名為setUpControl的函數，ControlValueAccessor的實例valueAccessor會被作為參數傳入這個函數中。在setUpControl中，ControlValueAccessor的四個方法會在交互時被調用，以完成formControl和元素之間的通信。

拓展：

在使用ControlValueAccessor時需要一同引入NG_VALUE_ACCESSOR，它是使用InjectionToken 創(chuàng)建的可在 Provider 中使用的 Token。我們在編寫自己的項目時一般不需要用到InjectionToken，但是在一個框架或者第三方的插件中，它就變得十分有必要了。

export const NG_VALUE_ACCESSOR =    new InjectionToken<ReadonlyArray<ControlValueAccessor>>("NgValueAccessor");

試想當我使用依賴注入的功能時，我需要將我創(chuàng)建的依賴注冊進組件中。這時我就需要一個令牌，如果我使用一個字符串作為令牌就有可能會造成重復，相同的令牌會導致后面的覆蓋前面的。所以需要一個Token作為一個唯一值來防止這種沖突。

providers: [{ provide: TOKEN, useValue: … }]

更多編程相關知識，請訪問：編程視頻?。?/p>

以上就是Angular學習之ControlValueAccessor接口詳解的詳細內容，更多請關注php中文網其它相關文章！

關鍵詞：