Jak uruchomić usługę po uruchomieniu aplikacji w Angular 2

Question

Utworzono usługę SocketService, w zasadzie inicjalizuje ona gniazdo, aby umożliwić aplikacji słuchanie na porcie. Ta usługa współdziała również z niektórymi komponentami.

// socket.service.ts

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

Znam kod w konstruktorze SocketService w() tylko zacznie działać, gdy element składowy use SocketService.

i zazwyczaj w app.ts kod wygląda następująco:

// app.ts

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

Jednakże chcę tego cyklu roboczego podczas uruchamiania aplikacji. Więc zrobiłem lewę, po prostu dodaj private _socketService: SocketService w konstruktorze aplikacji(). Więc teraz kody wyglądać następująco:

// app.ts (nowych)

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

Teraz to działa. Problemem są czasami kody w konstruktorze SocketService, czasami nie. Więc jak mam to zrobić poprawnie? Dzięki

Answer 1

Przenieś logikę w konstruktorze SocketService sposobu zamiast a następnie zadzwonić, że w konstruktorze głównego składnika lub ngOnInit

SocketService

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

App

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

Answer 2

Spróbuj utworzyć konstruktor usług & następnie wywołaj go w ngOnInit() swojego komponentu.

• modułu serwisowego

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

• Komponent

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

Hope this helps.

Answer 3

Zobacz także APP_INITIALIZER, który jest opisany jako;

Funkcja, która zostanie wykonana po zainicjowaniu aplikacji.

Answer 4

Odpowiedzi Stuarta są wskazane we właściwym kierunku, ale znalezienie informacji o APP_INITIALIZER nie jest łatwe. Skrócona wersja umożliwia jej uruchomienie kodu inicjalizacyjnego przed uruchomieniem dowolnego innego kodu aplikacji. Szukałem przez chwilę i znalazłem wyjaśnienia: here i here, które podsumuję na wypadek, gdyby zniknęły z sieci.

APP_INITIALIZER jest zdefiniowany jako kątowy/rdzeniowy. Umieszczasz go w swoim app.module.ts w ten sposób.

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

APP_INITIALIZER jest OpaqueToken która odwołuje usługę ApplicationInitStatus. ApplicationInitStatus to multi provider. Obsługuje wiele zależności i możesz go używać wielokrotnie na liście dostawców. Jest używany w ten sposób.

Ta deklaracja dostawcy informuje klasę ApplicationInitStatus, aby uruchomiła metodę DictionaryService.load(). load() zwraca obietnicę, a ApplicationInitStatus blokuje uruchamianie aplikacji, dopóki obietnica nie zostanie rozwiązana. Funkcja load() jest zdefiniowana w ten sposób.

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

Skonfiguruj w ten sposób, że słownik zostanie załadowany jako pierwszy, a pozostałe części aplikacji będą mogły na nim bezpiecznie polegać.

Edycja: pamiętaj, że zwiększy to czas ładowania z wyprzedzeniem dla Twojej aplikacji, o ile potrwa długo metoda load(). Jeśli chcesz uniknąć, możesz zamiast tego użyć numeru resolver na trasie.