Angular：如何向父类组件提供者传子类引用，复用NG_VALUE_ACCESSOR

你遇到的核心问题是：Angular组件装饰器在编译阶段执行，此时泛型参数TComp仅作为类型存在，并非运行时可访问的具体类引用，所以直接在父类@Component中使用TComp会报错。

下面提供两种可行方案，避免子类重复声明提供者：

方案一：使用装饰器工厂自动注入提供者 #

创建一个装饰器工厂，让子类在继承FormBase的同时，自动添加NG_VALUE_ACCESSOR提供者：

1. 定义装饰器工厂

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

export function ProvideValueAccessor<T extends new (...args: any[]) => any>(component: T) {
  return (constructor: Function) => {
    // 获取子类原有的@Component元数据
    const componentMeta = Reflect.getMetadata('annotations', constructor)?.[0];
    if (!componentMeta) return;

    // 添加NG_VALUE_ACCESSOR到提供者数组
    componentMeta.providers = [
      ...(componentMeta.providers || []),
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => component),
        multi: true
      }
    ];

    // 更新元数据
    Reflect.defineMetadata('annotations', [componentMeta], constructor);
  };
}

2. 修改父类为无装饰器的抽象类

import { ControlValueAccessor } from '@angular/forms';

export abstract class FormBase implements ControlValueAccessor {
  // 实现ControlValueAccessor的基础方法（根据需求完善）
  writeValue(obj: any): void {}
  registerOnChange(fn: any): void {}
  registerOnTouched(fn: any): void {}
  setDisabledState?(isDisabled: boolean): void {}
}

3. 子类使用装饰器并继承父类

import { Component } from '@angular/core';
import { FormBase, ProvideValueAccessor } from './form-base';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
@ProvideValueAccessor(ButtonComponent)
export class ButtonComponent extends FormBase {
  // 子类业务逻辑
}

方案二：利用Angular的InjectionToken和子类构造函数注入（备选） #

如果不想用装饰器，也可以在父类中通过依赖注入获取子类实例，但需要子类配合注册自身：

1. 父类定义

import { ControlValueAccessor, Inject, InjectionToken } from '@angular/forms';

export const SELF_COMPONENT = new InjectionToken<any>('SELF_COMPONENT');

export abstract class FormBase implements ControlValueAccessor {
  constructor(@Inject(SELF_COMPONENT) private self: any) {}

  // 实现ControlValueAccessor方法...
}

2. 子类注册自身并继承

import { Component, forwardRef } from '@angular/core';
import { FormBase, SELF_COMPONENT, NG_VALUE_ACCESSOR } from './form-base';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss'],
  providers: [
    { provide: SELF_COMPONENT, useExisting: forwardRef(() => ButtonComponent) },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ButtonComponent),
      multi: true
    }
  ]
})
export class ButtonComponent extends FormBase {
  constructor() {
    super(ButtonComponent);
  }
}

不过这个方案还是需要子类写提供者，只是可以通过常量复用代码，不如方案一彻底减少重复。

关键原理说明 #

Angular的装饰器（如@Component）是在类定义之前执行的，此时泛型参数TComp只是类型层面的占位符，没有对应的运行时值。装饰器工厂的方式是在子类定义完成后，动态修改其@Component元数据，此时已经能获取到具体的子类引用，从而解决找不到TComp的问题。

内容的提问来源于stack exchange，提问作者Shalashka