私はすべてのいくつかのサービスが注入されるはずの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のCcommentを参照）：

• グローバルインジェクターの注入は、多くの場所に注入する必要があるいくつかの異なるサービスがある場合にのみ改善されます。共有サービスが1つしかない場合は、そのサービスを派生クラス内に挿入する方がおそらくより簡単です。
• 私のソリューションと彼が提案した代替案には、どのクラスがどのサービスに依存しているかを確認するのが難しくなるという欠点があります。

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;
    }
}

この手法は、2つのことを前提としています。

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));
  }
}

または最も良い方法（コンストラクターのパラメーターは1つだけにしてください）：

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（）呼び出しを介して子から親にパラメータを渡して、意味があるようにします。インジェクターはもちろん別の実行可能なソリューションです。

醜いハック

少し前に、私のクライアントの一部が昨日まで2つの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);
  }
}