如何订阅Angular ControlValueAccessor指令中的FormControl值更改

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

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

  writeValue(value: any): void {
    // 这里可以设置输入框的值
  }

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

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // 这里可以设置输入框的禁用状态
  }
}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  template: `<app-custom-input formControlName="customInput"></app-custom-input>`
})
export class MyFormComponent {
  customInputControl = new FormControl();

  constructor() {
    this.customInputControl.valueChanges.subscribe(value => {
      console.log('Value changed:', value);
      // 在这里处理值更改
    });
  }
}