使用TypeScript和Angular 5在抽象类中进行依赖注入 [英] Dependency injection in abstract class with TypeScript and Angular 5

问题描述

我有 BaseComponent ，其中注入了一些依赖项。第一个依赖项 EntityService 是正确且必要的。

I've got the BaseComponent which got some dependencies injected. The first dependency EntityService is correct and necessary.

但是 AnyOtherService 仅在抽象的 BaseComponent 内部使用。与其将其注入未使用的 ChildComponent 内，我只想将其注入 BaseComonent 内

ButAnyOtherService is only used inside the abstract BaseComponent. Instead of injecting it inside the ChildComponent, where it is not used, I'd like to inject it only inside BaseComonent.

为什么我必须将其通过 ChildComponent 推向 BaseComponent ？最好的解决方案是将其封装在 BaseComponent 中。

Why do I have to push it through the ChildComponent towards the BaseComponent? The best solution would be to encapsulate it inside the BaseComponent.

base.component .ts

export abstract class BaseComponent {
  constructor(
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) {
  }
}

child.component.ts

@Component()
export class ChildComponent extends BaseComponent {

  constructor(
    private firstService: FirstService,
    private secondService: SecondService,
    protected anyOtherService: AnyOtherService // @todo remove this
  ) {
    super(
      firstService,
      anyOtherService // @todo remove this
    ); 
  }
}

推荐答案

所以您可以将 Injector 传递给基本组件构造函数（ UPDATE ）：

So you can pass Injector to base component constructor(UPDATE):

export abstract class BaseComponent {
  protected anyOtherService: AnyOtherService;

  constructor(
    inject: Injector
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) { 
     this.anyOtherService= inject.get(AnyOtherService);
  }
}


@Component()
  export class ChildComponent extends BaseComponent {

  constructor(
    inject: Injector,
    private firstService: FirstService,
    private secondService: SecondService       
  ) {
    super(
     inject,
     firstService
    );       
  }
}

想法是注入注入器和子组件中的某些提供程序，并将其传递给父基组件，而不传递所有基类依赖项。
通过传递器，子类（组件）不需要注入父（基）类的所有依赖关系，并传递抛出super（dep1，dep2 ...， baseDep1 ... ） ）。

The idea is to inject Injector and some providers in child component and pass it to parent base component without passing all base class dependencies. With passing injector, child classes(components) doesn't need to inject all dependencies of parent(base) class and pass throw super(dep1, dep2..., baseDep1...).

请您在回答中解释一下，为什么它必须像您所说的
带有私人内部孩子并受保护在父级内部？

Could you please explain in your answer, why it has to be like you've said with private inside child and protected inside parent?

我认为注入器不应该是子级/基类的属性。如果是这样，则会在您在下面评论时引发错误。该错误是关于基础和 Child 类在其类中不能具有相同的属性。这就是为什么我们需要在构造函数中的 injector 中省略private / protected或任何 access修饰符，也因为在构造函数中需要 Injector 才能手动注入在某些特定情况下，我们需要什么。

I think the injector shouldn't be the property of child/base class. If will be, the error throws as you comment below. The error is about, Base and Child class can't have the same property in their class. That's why we need to omit private/protected or any access modifier to injector in constructor, also because Injector is only needed in constructor to manually inject what we need in some specific cases as this.

这篇关于使用TypeScript和Angular 5在抽象类中进行依赖注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！