[解決済み] 継承と依存性注入
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
関連
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] 私的相続、公的相続、保護相続の違いについて
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】type()とisinstance()の違いは何ですか?)
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ng serve がファイルの変更を自動的に検出しない
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] Angular Materialでのデフォルトのソート - ヘッダーのソート
-
[解決済み] angular-cliのビルドでカスタムファイルをインクルードするには?
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] 別のプロセス(id #######)が現在 ngcc を実行しています。
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] Angular 4+ ngOnDestroy() サービス中 - observableを破壊する
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?