Angular中能否在InjectionToken内使用泛型类型？

你遇到的Cannot find name 'TOptionValue'错误，核心原因是定义InjectionToken的全局作用域中，不存在组件级的泛型参数TOptionValue。InjectionToken的类型参数是在定义阶段确定的，而组件的TOptionValue是在组件实例化时才指定的，两者作用域不匹配。下面是两种可行的解决方案：

方案一：将InjectionToken定义为泛型工厂函数（推荐） #

通过工厂函数动态创建对应泛型类型的InjectionToken，让每个组件实例可以绑定到专属的泛型Token，类型安全性更高。

1. 修改InjectionToken定义 #

// 定义泛型Token工厂
export function createOptionSelectionHandlerToken<T>() {
  return new InjectionToken<OptionSelectionHandler<T>>('OPTION_SELECTION_HANDLER');
}

2. 调整OptionComponent的providers配置 #

在组件的providers中，用工厂函数创建与当前组件泛型TOptionValue匹配的Token：

@Component({
  selector: 'app-option',
  templateUrl: './option.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [{ 
    provide: createOptionSelectionHandlerToken<TOptionValue>(), 
    useExisting: OptionComponent 
  }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptionComponent<TOptionValue> implements OptionSelectionHandler<TOptionValue> {
  // 组件原有代码保持不变
}

3. 在父组件中注入指定类型的Handler #

当需要注入时，通过工厂函数指定具体的泛型类型：

@Component({
  template: `<app-option [value]="123"></app-option>`
})
export class ParentComponent {
  constructor(
    @Inject(createOptionSelectionHandlerToken<number>())
    private selectionHandler: OptionSelectionHandler<number>
  ) {}
}

方案二：使用unknown作为默认类型，注入时指定泛型 #

如果不需要每个组件实例的专属Token，可以用unknown作为InjectionToken的默认类型，注入时通过类型断言或泛型指定具体类型。

1. 修改InjectionToken定义 #

export const OPTION_SELECTION_HANDLER = new InjectionToken<OptionSelectionHandler<unknown>>(
  'OPTION_SELECTION_HANDLER'
);

2. 组件providers保持原有配置 #

@Component({
  selector: 'app-option',
  templateUrl: './option.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptionComponent<TOptionValue> implements OptionSelectionHandler<TOptionValue> {
  // 组件原有代码保持不变
}

3. 注入时指定泛型类型 #

@Component({
  template: `<app-option [value]="'hello'"></app-option>`
})
export class ParentComponent {
  constructor(
    @Inject(OPTION_SELECTION_HANDLER)
    private selectionHandler: OptionSelectionHandler<string>
  ) {}
}

关键说明 #

• 组件的泛型参数TOptionValue仅在组件类的作用域内有效，无法直接在全局的InjectionToken定义中引用。
• 方案一的泛型工厂函数能确保类型严格匹配，避免类型断言带来的潜在风险；方案二更简洁，但需要手动保证注入类型与组件实例的泛型类型一致。

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