Question

我得到了注入了一些依赖项的BaseComponent。第一个依赖项EntityService是正确且必要的。

但AnyOtherService仅在摘要BaseComponent中使用。我没有将其注入ChildComponent内未使用的位置，而是仅将其注入BaseComonent内。

为什么我必须将ChildComponent推向BaseComponent？最好的解决方案是将其封装在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
    ); 
  }
}

Answer 1

所以你可以将 Injector 传递给基础组件构造函数（ 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
    );       
  }
}

我们的想法是在子组件中注入 Injector 和一些提供程序，并将其传递给父基本组件，而不传递所有基类依赖项。通过传入注入器，子类（组件）不需要注入父（基）类的所有依赖项并传递throw super（dep1，dep2 ...， baseDep1 ...... ）。

请你在答案中解释一下，为什么它必须像你一样与私人内部孩子说并保护父母内部？

我认为注入器不应该是子/基类的属性。如果是，则在您在下面发表评论时会抛出错误。错误是， Base 和 Child 类在其类中不能具有相同的属性。这就是为什么我们需要在构造函数中省略私有/受保护或任何访问修饰符到注入器，也因为注入器仅在构造函数中需要手动注入在某些特定情况下我们需要什么。

Answer 2

你可以尝试这样，使用注入器，从appmodule导出它并在你的基类中使用它

import {Injector} from '@angular/core';

//exporting injector 
export let AppInjector: Injector;

export class AppModule {
  constructor(private injector: Injector) {
    AppInjector = this.injector;
  }
}

然后是base.component.ts

export abstract class BaseComponent {
  private anyOtherService : AnyOtherService ;
  constructor(
    protected entityService: EntityService,
    // protected anyOtherService: AnyOtherService // @todo add this
  ) {
    this.anyOtherService = AppInjector.get(AnyOtherService );
  }
}

使用TypeScript和Angular 5

2 个答案: