Angular可复用日期选择器子组件多实例独立provider配置问题

核心原因 #

你遇到的多实例配置覆盖问题，是因为@Component元数据中的providers配置是组件类定义阶段就完成初始化的，直接使用useValue绑定变量的话，所有组件实例会共用同一份配置引用，后初始化的实例赋值会直接覆盖之前的配置。

修复方案 #

1. 定义独立注入令牌 #

首先为子组件的日期格式化规则定义专属的InjectionToken，避免和全局同类型配置冲突：

// child1.component.ts
import { InjectionToken } from '@angular/core';

export const DATE_PICKER_FORMATS = new InjectionToken<Record<string, string>>('日期选择器格式化配置');

2. 子组件改用useFactory动态注入配置 #

不要在providers中直接写死useValue，改为通过工厂函数动态读取当前组件实例的输入属性，每个实例会生成独立的注入值：

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  // 关键配置：useFactory动态取当前实例的输入属性
  providers: [
    {
      provide: DATE_PICKER_FORMATS,
      useFactory: (componentInstance: DatePickerComponent) => componentInstance.dateFormats,
      deps: [DatePickerComponent]
    }
  ]
})
export class DatePickerComponent {
  // 接收父组件传入的格式化配置
  @Input() dateFormats!: Record<string, string>;
  // 接收粒度配置
  @Input() periodLevel!: 'day' | 'month' | 'year';

  // 组件内需要用到格式化规则的地方，直接注入上面定义的令牌即可
  constructor(@Inject(DATE_PICKER_FORMATS) private formats: Record<string, string>) {}

  // 其余组件逻辑
}

3. 父组件正常传参即可 #

父组件调用时直接给每个子组件传对应粒度的配置，不会出现互相覆盖的问题：

<!-- 日粒度选择器，显示dd/mm/yyyy -->
<app-date-picker 
  [dateFormats]="{display: 'dd/mm/yyyy', parse: 'dd/MM/yyyy'}"
  periodLevel="day"
></app-date-picker>

<!-- 月粒度选择器，显示mm/yyyy -->
<app-date-picker 
  [dateFormats]="{display: 'mm/yyyy', parse: 'MM/yyyy'}"
  periodLevel="month"
></app-date-picker>

实现原理 #

useFactory工厂函数会在每个子组件实例初始化时才执行，直接读取当前实例的输入属性作为注入值，每个子组件的注入器完全独立，不会共享配置引用，从根源避免了多实例配置覆盖的问题。

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