Angular 提供者：使用现有的或创建一个（如果未提供）

Question

Injectable在 Angular 2+ 中，如果不存在实例，如何提供一个新实例？

我搜索并没有找到所以我尝试了useFactory。到目前为止，这是我的代码：

{
  provide: ColorsService,
  useFactory: (colorService: ColorsService, colors: string[]) => {
    if (colorService) return colorService;
    return new ColorsService(colors);
  },
  deps: [ColorsService, MY_COLORS],
},

除了我手动注入令牌这一事实之外MY_COLORS，我还收到一个奇怪的错误：

错误：ColorsService 的循环 dep

Answer 1

还有另一种方法可以实现这一目标。

{
  provide: ColorsService,
  useFactory: (parentInjector: Injector, colorService?: ColorsService) => {
    if (!colorService) {
        const injector = Injector.create({ providers: [{ provide: ColorsService }], parent: parentInjector });
        colorService = injector.get(ColorsService);
      }

      return colorService;
  },
  deps: [ Injector, [ new Optional(), new SkipSelf(), ColorsService ] ],
}

这样，每个孩子也将能够注入正确的服务

Answer 2

所以在@eko的帮助下我找到了这个解决方案：

@Component({
  ...
  providers: [ColorsService],
})
export class ChildComponent {
  colorService: ColorsService;
  constructor(
    @Self() currentColorService: ColorsService,
    @Optional() @SkipSelf() parentColorService?: ColorsService,
  ) {
    this.colorService = parentColorService ?? currentColorService;
  }
}

在此示例中， 是parentColorService可能由父组件提供的服务。如果没有提供，我将使用currentColorSerivce在此组件中实例化的（它无论如何都已实例化，这可能不是一件好事）。