angular - 扩展已注入(inject)服务的类而不在子类中重复注入(inject)器？

Question

好的，我正在深入研究 TypeScript 继承(特别是在 Angular 11 中)，并且我已经设置了 BasePageComponent提供跨页面存在的所有必要的功能和服务。 我遇到的问题是，现在我的基础变得臃肿，因为有些服务仅在一两个页面上使用，但为了扩展基础，我们将这些服务包含在基础中。

export class BasePageComponent {

  constructor(
    public uiPopupService: UiPopUpService,
    public loaderService: LoaderService,
    public questionService: QuestionService,
    public aBunchOfOthers: OTHERS,
    public exampleOneOffService: ExampleOneOffService
  ) {}
}

我意识到重复所有注入(inject)的服务，然后将它们全部传递到 BasePageComponent 会更高效。如下:

export class ChildPageComponent extends BasePageComponent {

  constructor(
    public uiPopupService: UiPopUpService,
    public loaderService: LoaderService,
    public questionService: QuestionService,
    public aBunchOfOthers: OTHERS,
    private exampleOneOffService: ExampleOneOffService
  ) {
    super(uiPopupService, loaderService, questionService, aBunchOfOthers);
  }
}

如果没有其他方法，我将执行上述操作，但正如示例代码中所暗示的那样，我有一堆其他微服务包含在基础中(例如 15-20)，所以我想要能够做这样的事情，我只声明一个附加服务，并且仍然从父类继承所有其他服务，但我没有找到一种方法来做到这一点。

export class ChildPageComponent extends BasePageComponent {

  constructor(private otherExampleService: OtherExampleService){
    super() 
  };
}

这种模式是否存在，只是我没有在谷歌上搜索正确的关键字？

Answer 1

这有点讽刺，您使用继承来避免依赖注入(inject)，而实际上您应该使用依赖注入(inject)来避免继承。如果组件具有共享服务，您所需要做的就是将所需的服务放入构造函数中，然后就完成了。

如果它们具有共享功能，您可以将这些功能放入服务中。如果它们具有共享变量，您可以使用服务来传递数据。关键是将组件作为自己独立的实体，因此如果您更改一个组件，它不会影响任何其他组件。

服务遵循同样的理念，因为您可以更改服务的实现，而无需触及使用该服务的任何文件。考虑一下您的设计，如果您需要删除基础组件或向基础组件添加服务，会发生什么情况？您现在需要去编辑整个项目中的所有其他组件。当您将服务注入(inject)组件时，它也会创建该服务的实例。通过将所有服务注入(inject)每个组件中，您正在创建无数浪费内存和处理能力的实例。你真的得到任何返回吗？

我想说的是你应该尽量避免扩展组件。 Angular 提供了更好的设计理念。

要回答您的问题，是的，您可以创建一项全局服务来导入所有其他服务，然后注入(inject)该大型服务。然后您可以扩展该服务并导入更多服务。但出于对所有神圣事物的热爱，请不要这么做。