1. ホーム
  2. angular

[解決済み] 継承と依存性注入

2022-08-19 13:51:31

質問

あるサービスをインジェクトするための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のインスタンスが複数生成されるのを防ぐことができるようになりました。

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ünter Zöchbauerからのコメントを参照してください)。

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

Angular2における依存性注入の非常によく書かれた説明については、私が問題を解決するのに非常に役立ったこのブログ記事をご覧ください。 http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html