Angular中的控件值訪問(wèn)器是什么如何使用

在Angular中，控件值訪問(wèn)器是一個(gè)接口，用于自定義控件或表單控件的值訪問(wèn)邏輯。控件值訪問(wèn)器有兩個(gè)方法：writeValue和registerOnChange。

1. writeValue方法用于在控件初始化時(shí)將值寫入控件。當(dāng)父組件或表單控件調(diào)用該方法時(shí)，控件應(yīng)該根據(jù)傳入的值更新自己的狀態(tài)。

2. registerOnChange方法用于注冊(cè)一個(gè)回調(diào)函數(shù)，在控件的值發(fā)生變化時(shí)觸發(fā)該函數(shù)。當(dāng)控件的值發(fā)生變化時(shí)，控件可以調(diào)用這個(gè)回調(diào)函數(shù)來(lái)通知父組件或表單控件。

要使用控件值訪問(wèn)器，首先需要?jiǎng)?chuàng)建一個(gè)實(shí)現(xiàn)了ControlValueAccessor接口的自定義控件，并實(shí)現(xiàn)writeValue和registerOnChange方法。然后在模板中使用該自定義控件，并通過(guò)ngModel或formControl指令綁定值。

以下是一個(gè)簡(jiǎn)單的示例：

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

@Component({
  selector: 'custom-input',
  template: `<input type="text" [(ngModel)]="value" (input)="onChange($event.target.value)">`,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
  }]
})
export class CustomInputComponent implements ControlValueAccessor {
  value: string;

  onChange: any = () => {};
  
  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {}

  setDisabledState(isDisabled: boolean): void {}
}

在上面的示例中，我們創(chuàng)建了一個(gè)自定義的輸入框組件CustomInputComponent，并實(shí)現(xiàn)了ControlValueAccessor接口的方法。在模板中我們使用了ngModel指令綁定了value屬性，并在輸入框值發(fā)生變化時(shí)調(diào)用onChange方法通知父組件。最后通過(guò)NG_VALUE_ACCESSOR提供者注冊(cè)了CustomInputComponent為值訪問(wèn)器。

使用該自定義控件時(shí)，只需要在父組件中引入CustomInputComponent，并在模板中使用即可：

<custom-input [(ngModel)]="myValue"></custom-input>

這樣就可以實(shí)現(xiàn)自定義控件的值訪問(wèn)邏輯。