我有一组angular2组件，都应该注入一些服务。我首先想到的是，最好是创建一个超类并在其中注入服务。然后，我的任何组件都将扩展该超类，但是这种方法不起作用。

简化示例：

export class AbstractComponent {
  constructor(private myservice: MyService) {
    // Inject the service I need for all components
  }
}

export MyComponent extends AbstractComponent {
  constructor(private anotherService: AnotherService) {
    super(); // This gives an error as super constructor needs an argument
  }
}

我可以通过MyService在每个组件中注入并使用该参数进行super()调用来解决此问题，但这显然是荒谬的。

如何正确地组织我的组件，以便它们从超类继承服务？

我可以通过在每个组件中注入MyService并将该参数用于super（）调用来解决此问题，但这绝对是荒谬的。

这不是荒谬的。这就是构造函数和构造函数注入的工作方式。

每个可注入类都必须将依赖项声明为构造函数参数，如果超类也具有依赖项，则这些依赖项也需要在子类的构造函数中列出，并随super(dep1, dep2)调用传递给超类。

绕过注入器并强制获取依赖项具有严重的缺点。

它隐藏了依赖关系，使代码更难阅读。
它违反了熟悉Angular2 DI的工作原理的期望。
它破坏了生成静态代码以替换声明性和命令性DI的脱机编译，从而提高了性能并减小了代码大小。

更新的解决方案，防止使用全局注入器生成myService的多个实例。

import {Injector} from '@angular/core';
import {MyServiceA} from './myServiceA';
import {MyServiceB} from './myServiceB';
import {MyServiceC} from './myServiceC';

export class AbstractComponent {
  protected myServiceA:MyServiceA;
  protected myServiceB:MyServiceB;
  protected myServiceC:MyServiceC;

  constructor(injector: Injector) {
    this.settingsServiceA = injector.get(MyServiceA);
    this.settingsServiceB = injector.get(MyServiceB);
    this.settingsServiceB = injector.get(MyServiceC);
  }
}

export MyComponent extends AbstractComponent {
  constructor(
    private anotherService: AnotherService,
    injector: Injector
  ) {
    super(injector);

    this.myServiceA.JustCallSomeMethod();
    this.myServiceB.JustCallAnotherMethod();
    this.myServiceC.JustOneMoreMethod();
  }
}

这将确保MyService可以在扩展AbstractComponent的任何类中使用，而无需在每个派生类中注入MyService。

此解决方案有一些弊端（请参见我原始问题下方的@GünterZöchbauer的评论）：

• 只有在许多地方需要注入几种不同的服务时，才注入全局注入器。如果您只有一项共享服务，那么最好在派生类中注入该服务。
• 我的解决方案和他提出的替代方案都有两个缺点，即它们使查看哪个类取决于什么服务变得更加困难。

有关Angular2中依赖项注入的非常好的书面说明，请参阅此博客文章，该文章对我解决问题有很大帮助：http : //blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

我创建了一个提供服务的类，而不是手动注入所有服务，例如，它获取了注入的服务。然后将该类注入派生类中，并传递给基类。

派生类：

@Component({
    ...
    providers: [ProviderService]
})
export class DerivedComponent extends BaseComponent {
    constructor(protected providerService: ProviderService) {
        super(providerService);
    }
}

基类：

export class BaseComponent {
    constructor(protected providerService: ProviderService) {
        // do something with providerService
    }
}

服务等级：

@Injectable()
export class ProviderService {
    constructor(private _apiService: ApiService, private _authService: AuthService) {
    }
}

而不是注入将所有其他服务都作为依赖项的服务，如下所示：

class ProviderService {
    constructor(private service1: Service1, private service2: Service2) {}
}

class BaseComponent {
    constructor(protected providerService: ProviderService) {}

    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

我将跳过这一额外步骤，而只需在BaseComponent中添加注入所有服务，如下所示：

class BaseComponent {
    constructor(protected service1: Service1, protected service2: Service2) {}
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        this.service1;
        this.service2;
    }
}

该技术假设两件事：

1. 您的关注与组件继承完全相关。您最有可能落在这个问题上的原因是因为您需要在每个派生类中重复大量的非干燥（WET？）代码。如果您希望所有组件和服务都受益于单个入口点，则需要执行额外的步骤。

2. 每个组成部分扩展了 BaseComponent

如果决定使用派生类的构造函数，则还有一个缺点，因为您将需要调用super()并传入所有依赖项。尽管我并没有真正看到需要使用constructor代替代替的用例ngOnInit，但完全有可能存在这种用例。

如果父类是从第三方插件获得的（并且您不能更改源代码），则可以执行以下操作：

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

export MyComponent extends AbstractComponent {
  constructor(
    protected injector: Injector,
    private anotherService: AnotherService
  ) {
    super(injector.get(MyService));
  }
}

或更好的方法（仅在构造函数中保留一个参数）：

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

export MyComponent extends AbstractComponent {
  private anotherService: AnotherService;

  constructor(
    protected injector: Injector
  ) {
    super(injector.get(MyService));
    this.anotherService = injector.get(AnotherService);
  }
}

据我了解，为了继承基类，您首先需要实例化它。为了实例化它，您需要传递其构造函数所需的参数，这样就可以通过super（）调用将它们从子级传递到父级，这样才有意义。当然，喷油器是另一种可行的解决方案。

丑陋的哈克

前段时间，我的一些客户希望将两个BIG角度项目加入到昨天（角度v4到角度v8）。Project v4对每个组件使用BaseView类，并且包含tr(key)翻译方法（在v8中，我使用ng-translate）。因此，为了避免切换翻译系统并并行编辑数百个模板（在v4中）或设置2翻译系统，我使用了以下丑陋的技巧（我对此并不感到骄傲）-在AppModule类中，我添加了以下构造函数：

export class AppModule { 
    constructor(private injector: Injector) {
        window['UglyHackInjector'] = this.injector;
    }
}

现在AbstractComponent您可以使用

export class AbstractComponent {
  private myservice: MyService = null;

  constructor() {
    this.myservice = window['UglyHackInjector'].get(MyService);
  }
}