动态插入组件时ControlValueAccessor不工作

基础概念

ControlValueAccessor 是 Angular 框架中的一个接口，用于在自定义表单控件和 Angular 表单 API 之间进行通信。它允许开发者创建自定义的表单控件，并使其能够与 Angular 的表单系统无缝集成。

类型与应用场景

自定义输入框：如日期选择器、颜色选择器等。
复杂组件：如动态表单、可编辑表格等。
第三方组件集成：使第三方 UI 库的组件能够与 Angular 表单系统集成。

常见问题及原因

问题描述：动态插入组件时，ControlValueAccessor 不工作。

可能原因：

变更检测未触发：Angular 的变更检测机制可能未检测到组件的插入。
实例化顺序问题：组件可能在 Angular 表单系统初始化之后才被插入。
注册问题：自定义控件可能未正确注册为表单控件。

解决方案

1. 确保变更检测触发

使用 ChangeDetectorRef 手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.cdr.detectChanges();
}

2. 使用 `ViewContainerRef` 动态插入组件

确保在 Angular 的变更检测周期内插入组件：

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { MyCustomComponent } from './my-custom.component';

constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}

ngOnInit() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyCustomComponent);
  const componentRef = this.viewContainerRef.createComponent(componentFactory);
}

3. 正确注册自定义控件

确保自定义控件实现了 ControlValueAccessor 接口，并在模块中声明：

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

export class MyCustomComponent implements ControlValueAccessor {
  // 实现 ControlValueAccessor 接口的方法
}

@NgModule({
  declarations: [MyCustomComponent],
  exports: [MyCustomComponent],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),
      multi: true
    }
  ]
})
export class MyCustomModule {}

示例代码

假设我们有一个自定义的日期选择器组件 MyDatePicker，它实现了 ControlValueAccessor 接口。

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

@Component({
  selector: 'my-date-picker',
  template: `<input type="date" [(ngModel)]="value" (ngModelChange)="onChange($event)">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyDatePicker),
      multi: true
    }
  ]
})
export class MyDatePicker implements ControlValueAccessor {
  value: string;

  onChange: any = () => {};
  onTouched: any = () => {};

  writeValue(value: string): void {
    this.value = value;
  }

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

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

在父组件中动态插入 MyDatePicker：

import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { MyDatePicker } from './my-date-picker.component';

@Component({
  selector: 'app-parent',
  template: `<ng-container #container></ng-container>`
})
export class ParentComponent {
  constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyDatePicker);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
  }
}

通过以上步骤，可以确保动态插入的组件能够正确地与 Angular 的表单系统集成。