アプリがAngular2で起動したときにサービスを実行する方法

私はサービスSocketServiceを作成しました。基本的には、アプリがポートでリッスンできるようにソケットを初期化します。このサービスは、一部のコンポーネントとも相互作用します。

// socket.service.ts

export class SocketService {
    constructor() {
        // Initializes the socket
    }
    ...
}

SocketServiceのconstructor（）のコードは、コンポーネントが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のconstructor（）のコードが実行されることもあれば、実行されないこともあります。では、どうすれば正しく行うことができますか？ありがとう

スチュアートの答えは正しい方向を示していますが、APP_INITIALIZERに関する情報を見つけるのは簡単ではありません。短いバージョンでは、他のアプリケーションコードを実行する前に、これを使用して初期化コードを実行できます。しばらく検索して、こことここで説明を見つけました。それらがWebから消えた場合に備えて要約します。

APP_INITIALIZERは角度/コアで定義されています。このようにapp.module.tsに含めます。

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

APP_INITIALIZERは、ApplicationInitStatusサービスを参照するOpaqueToken（またはAngular 4以降のInjectionToken）です。ApplicationInitStatusはマルチプロバイダーです。複数の依存関係をサポートしており、プロバイダーリストで複数回使用できます。このように使われます。

@NgModule({
  providers: [
    DictionaryService,
    {
      provide: APP_INITIALIZER,
      useFactory: (ds: DictionaryService) => () => return ds.load(),
      deps: [DictionaryService],
      multi: true
    }]
})
export class AppModule { }

このプロバイダー宣言は、ApplicationInitStatusクラスにDictionaryService.load（）メソッドを実行するように指示します。load（）はpromiseを返し、ApplicationInitStatusはpromiseが解決されるまでアプリの起動をブロックします。load（）関数はこのように定義されています。

load(): Promise<any> {
  return this.dataService.getDiscardReasons()
  .toPromise()
  .then(
    data => {
      this.dictionaries.set("DISCARD_REASONS",data);
    }
  )
}

辞書が最初に読み込まれ、アプリの他の部分が安全に辞書に依存できるように設定します。

編集：これにより、load（）メソッドにかかる時間がどれだけ長くても、アプリの先行読み込み時間が長くなることに注意してください。それを避けたい場合は、代わりにルートでリゾルバーを使用できます。

SocketService代わりに、コンストラクターのロジックをメソッドに移動してから、メインコンポーネントのコンストラクターでそれを呼び出すか、ngOnInit

SocketService

export class SocketService{
    init(){
        // Startup logic here
    }
}

アプリ

import {SocketService} from './socket.service';
...
class App {
    constructor (private _socketService: SocketService) {
        _socketService.init();
    }
}
bootstrap(App, [SocketService]);

APP_INITIALIZERも参照してください。これは次のように説明されています。

アプリケーションの初期化時に実行される関数。

サービスコンストラクターを作成してから、コンポーネントのngOnInit（）で呼び出してみてください。

• サービスモジュール

 export class SocketService {
    constructor() { }
        getData() {
            //your code Logic
        }
}

• 成分

export class AppComponent {
    public record;  
    constructor(private SocketService: DataService){ }
    ngOnInit() {        
        this.SocketService.getData()
        .subscribe((data:any[]) => {
            this.record = data;
        });   
  }  
}       

お役に立てれば。