Angular中如何向服务构造函数注入自定义字符串参数？

现有3个功能逻辑高度相似的组件，计划将重复逻辑抽离为共享服务，服务需要接收一个字符串类型的type参数，用于定义后续接口调用使用的URL。
最初尝试在组件的providers配置中通过工厂函数传入type字符串作为构造函数参数，实现代码如下：

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  providers: [
    {
      provide: HelperService,
      useFactory: (type: string, termService: TermService) =>
        new HelperService(type, termService),
      deps: ['userTerms', HelperService],
    },
  ],
})

运行后触发如下报错：

ERROR
Error: R3InjectorError(AppModule)[userTerms -> userTerms -> userTerms]:
NullInjectorError: No provider for userTerms!
需要实现向服务构造函数传递自定义字符串参数的可行方案。

报错核心来自两处配置错误：

1. deps数组中写的字符串'userTerms'不是合法的已注册依赖注入令牌，Angular注入器无法找到对应提供者，直接抛出空注入错误
2. deps数组中错误加入了HelperService本身，会触发循环依赖问题

方案1：使用InjectionToken传参（官方推荐，适配全场景） #

这是Angular依赖注入体系支持的标准传参方式，服务实例仍由注入器管理，支持被组件内其他指令、子组件注入使用。

• 第一步：定义专属注入令牌，用于标记要传入的字符串参数

import { InjectionToken } from '@angular/core';
// 定义令牌，泛型指定参数类型为string
export const HELPER_SERVICE_TYPE = new InjectionToken<string>('helper_service_type');

• 第二步：修正组件的providers配置，先给令牌提供对应的字符串值，再修正工厂函数的依赖声明

import { Component } from '@angular/core';
import { HelperService, HELPER_SERVICE_TYPE } from './helper.service';
import { TermService } from './term.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  providers: [
    // 给令牌提供当前组件需要传入的type值
    { provide: HELPER_SERVICE_TYPE, useValue: 'userTerms' },
    {
      provide: HelperService,
      useFactory: (type: string, termService: TermService) => new HelperService(type, termService),
      // 只声明需要注入的令牌和依赖服务，不要加入HelperService本身
      deps: [HELPER_SERVICE_TYPE, TermService]
    }
  ]
})
export class HelloComponent {}

• 第三步：修改HelperService构造函数，用@Inject装饰器标记传入的字符串参数

import { Injectable, Inject } from '@angular/core';
import { TermService } from './term.service';
import { HELPER_SERVICE_TYPE } from './helper.service';

@Injectable()
export class HelperService {
  constructor(
    @Inject(HELPER_SERVICE_TYPE) private readonly type: string,
    private readonly termService: TermService
  ) {
    // 此处可直接获取传入的type值，拼接对应请求URL
  }
}

不同组件使用时，只需要在自己的providers里给HELPER_SERVICE_TYPE提供不同的字符串值即可，不需要修改服务本身的代码。

方案2：手动实例化服务（轻量场景适用） #

如果HelperService只在当前组件内部使用，不需要被其他指令、子组件注入，可以直接在组件中手动实例化服务，不需要在providers中配置，传参更直接：

import { Component } from '@angular/core';
import { HelperService } from './helper.service';
import { TermService } from './term.service';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  providers: [TermService]
})
export class HelloComponent {
  public readonly helperService: HelperService;

  constructor(private readonly termService: TermService) {
    // 手动new实例，直接传入自定义type参数
    this.helperService = new HelperService('userTerms', this.termService);
  }
}

• 服务需要被组件内其他单元（子组件、指令、管道）注入使用时，选方案1
• 服务仅在当前组件内部调用，无跨单元注入需求时，选方案2更简洁

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