Angular中的控件值訪問器是什么如何使用

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

1. writeValue方法用于在控件初始化時將值寫入控件。當父組件或表單控件調用該方法時，控件應該根據傳入的值更新自己的狀態。

2. registerOnChange方法用于注冊一個回調函數，在控件的值發生變化時觸發該函數。當控件的值發生變化時，控件可以調用這個回調函數來通知父組件或表單控件。

要使用控件值訪問器，首先需要創建一個實現了ControlValueAccessor接口的自定義控件，并實現writeValue和registerOnChange方法。然后在模板中使用該自定義控件，并通過ngModel或formControl指令綁定值。

以下是一個簡單的示例：

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 {}
}

在上面的示例中，我們創建了一個自定義的輸入框組件CustomInputComponent，并實現了ControlValueAccessor接口的方法。在模板中我們使用了ngModel指令綁定了value屬性，并在輸入框值發生變化時調用onChange方法通知父組件。最后通過NG_VALUE_ACCESSOR提供者注冊了CustomInputComponent為值訪問器。

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

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

這樣就可以實現自定義控件的值訪問邏輯。