Cara menjalankan layanan saat aplikasi dimulai di Angular 2

Saya membuat SocketService layanan, pada dasarnya ini menginisialisasi soket untuk membiarkan aplikasi mendengarkan di port. Layanan ini juga berinteraksi dengan beberapa komponen.

// socket.service.ts

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

Saya tahu kode di konstruktor SocketService () hanya mulai berjalan ketika komponen menggunakan SocketService.

Dan biasanya kode di app.ts terlihat seperti ini:

// app.ts

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

Namun, saya ingin layanan ini berjalan saat aplikasi dimulai. Jadi saya membuat trik, tambahkan saja private _socketService: SocketServiceApp's constructor (). Jadi sekarang kodenya terlihat seperti ini:

// app.ts (baru)

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

Sekarang berhasil. Masalahnya terkadang kode dalam konstruktor SocketService () berjalan, terkadang tidak. Jadi bagaimana saya harus melakukannya dengan benar? Terima kasih

Jawaban Stuart mengarah ke arah yang benar, tetapi tidak mudah menemukan informasi di APP_INITIALIZER. Versi singkatnya adalah Anda dapat menggunakannya untuk menjalankan kode inisialisasi sebelum kode aplikasi Anda yang lain berjalan. Saya mencari beberapa saat dan menemukan penjelasan di sini dan di sini , yang akan saya rangkum jika mereka menghilang dari web.

APP_INITIALIZER didefinisikan dalam angular / core. Anda memasukkannya ke dalam app.module.ts Anda seperti ini.

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

APP_INITIALIZER adalah OpaqueToken (atau InjectionToken sejak Angular 4) yang mereferensikan layanan ApplicationInitStatus. ApplicationInitStatus adalah penyedia multi . Ini mendukung banyak dependensi dan Anda dapat menggunakannya dalam daftar penyedia Anda beberapa kali. Ini digunakan seperti ini.

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

Deklarasi penyedia ini memberi tahu kelas ApplicationInitStatus untuk menjalankan metode DictionaryService.load (). load () mengembalikan sebuah janji dan ApplicationInitStatus memblokir startup aplikasi sampai janji tersebut diselesaikan. Fungsi load () didefinisikan seperti ini.

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

Atur seperti itu kamus akan dimuat terlebih dahulu dan bagian lain dari aplikasi dapat dengan aman bergantung padanya.

Edit: Ketahuilah bahwa ini akan meningkatkan waktu muat di muka untuk aplikasi Anda berapa lama pun metode load () berlangsung. Jika Anda ingin menghindarinya, Anda dapat menggunakan resolver di rute Anda.

Pindahkan logika dalam SocketServicekonstruktor Anda ke sebuah metode dan kemudian panggil logika tersebut di konstruktor komponen utama Anda ataungOnInit

SocketService

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

Aplikasi

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

Lihat juga APP_INITIALIZER , yang dideskripsikan sebagai;

Fungsi yang akan dijalankan saat aplikasi diinisialisasi.

Coba Buat konstruktor layanan & kemudian panggil dalam ngOnInit () komponen Anda.

• Modul Layanan

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

• Komponen

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

Semoga ini membantu.