[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
質問
SocketServiceというサービスを作りました。基本的にはソケットを初期化し、アプリがポートをリッスンできるようにします。このサービスはまた、いくつかのコンポーネントと相互作用します。
// socket.service.ts
export class SocketService {
constructor() {
// Initializes the socket
}
...
}
SocketServiceのコンストラクタ()内のコードは、コンポーネントがSocketServiceを使用するときにのみ実行が開始されますね。
そして、通常app.tsのコードはこんな感じです。
// app.ts
import {SocketService} from './socket.service';
...
class App {
constructor () {}
}
bootstrap(App, [SocketService]);
しかし、このサービスはアプリの起動時に実行させたい。そこで
private _socketService: SocketService
を追加するだけです。これで、コードは次のようになる。
// app.ts (新規)
import {SocketService} from './socket.service';
...
class App {
constructor (private _socketService: SocketService) {}
}
bootstrap(App, [SocketService]);
これで動作するようになりました。問題は、SocketServiceのコンストラクタ()内のコードが実行されるときとされないときがあることです。では、どのようにすれば正しく動作するのでしょうか?ありがとうございます。
どのように解決するのですか?
Stuartの回答は正しい方向を示していますが、APP_INITIALIZERに関する情報を見つけるのは簡単ではありません。簡単に言うと、他のアプリケーション コードが実行される前に初期化コードを実行するために使用することができます。しばらく検索してみたところ、以下のような説明がありました。 ここで と はこちら がありますが、ウェブ上から消えてしまうかもしれないので、まとめておきます。
APP_INITIALIZERはangular/coreで定義されています。このようにapp.module.tsにインクルードします。
import { APP_INITIALIZER } from '@angular/core';
APP_INITIALIZERは OpaqueToken (または Angular 4 以降の InjectionToken) で、ApplicationInitStatus サービスを参照しています。ApplicationInitStatusは マルチプロバイダ . これは複数の依存関係をサポートし、プロバイダリストの中で複数回使用することができます。使い方はこのようになります。
@NgModule({
providers: [
DictionaryService,
{
provide: APP_INITIALIZER,
useFactory: (ds: DictionaryService) => () => return ds.load(),
deps: [DictionaryService],
multi: true
}]
})
export class AppModule { }
このプロバイダ宣言は、ApplicationInitStatusクラスにDictionaryService.load()メソッドを実行するように指示しています。load()はプロミスを返し、ApplicationInitStatusはプロミスが解決されるまでアプリ起動をブロックするようになっています。load()関数はこのように定義されています。
load(): Promise<any> {
return this.dataService.getDiscardReasons()
.toPromise()
.then(
data => {
this.dictionaries.set("DISCARD_REASONS",data);
}
)
}
辞書が最初に読み込まれるように設定し、アプリの他の部分が安全にそれに依存できるようにします。
編集: これは、load()メソッドにかかる時間だけ、アプリの最初のロード時間を増加させることに注意してください。 これを避けたい場合は リゾルバ を使うことができます。
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み】アンギュラーコンポーネントにサービスを注入しようとするとエラー "EXCEPTION: Can't resolve all parameters for component"、なぜ?
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み] Angular 2の "select "で新しい選択範囲を取得するにはどうすればよいですか?
-
[解決済み] [Solved] angular 2 typescriptアプリでmoment.jsライブラリを使用するにはどうすればよいですか?
-
[解決済み] describe'という名前が見つかりません。テストランナー用の型定義をインストールする必要がありますか?
-
[解決済み] ts ES5/ES3の非同期関数やメソッドには、「Promise」コンストラクタが必要です。
-
[解決済み] Visual Studio Code - インポート引用符の設定を調整する
最新
-
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 実装 サイバーパンク風ボタン