Cómo ejecutar un servicio cuando la aplicación se inicia en Angular 2

Question

Cómo ejecutar un servicio cuando la aplicación se inicia en Angular 2

Creé un servicio SocketService, básicamente inicializa el socket para permitir que la aplicación escuche en el puerto. Este servicio también interactúa con algunos componentes.

// socket.Servicio.ts

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

Sé que el código en el constructor() de SocketService solo comienza a ejecutarse cuando un componente usa SocketService.

Y por lo general el código en la aplicación.ts se ve así:

// app.ts

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

Sin embargo, quiero que este servicio se ejecute cuando se inicie la aplicación. Así que hecho un truco, solo tiene que añadir private _socketService: SocketService en constructor de la aplicación(). Así que ahora los códigos se ven así:

// app.ts (nuevo)

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

Ahora funciona. El problema es que a veces los códigos en el constructor() de SocketService se ejecutan, a veces no. Entonces, ¿cómo debo hacerlo correctamente? Gracias

44

typescript angular

Author: Hongbo Miao, 2016-02-04

Source

4 answers

La respuesta de Stuart apunta en la dirección correcta, pero no es fácil encontrar información en APP_INITIALIZER. La versión corta es que puede usarla para ejecutar el código de inicialización antes de que se ejecute cualquiera de sus otros códigos de aplicación. Busqué por un tiempo y encontré explicaciones aquí y aquí , que resumiré en caso de que desaparezcan de la web.

APP_INITIALIZER se define en angular/core. Lo incluye en su aplicación.módulo.ts como este.

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

APP_INITIALIZER es un OpaqueToken que hace referencia al servicio ApplicationInitStatus. ApplicationInitStatus es un proveedor múltiple. Admite varias dependencias y puede usarlo en su lista de proveedores varias veces. Se usa así.

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

Esta declaración del proveedor le dice a la clase ApplicationInitStatus que ejecute el DictionaryService.método load (). load() devuelve una promesa y ApplicationInitStatus bloquea el inicio de la aplicación hasta la promesa resuelve. La función load() se define así.

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

Configurar de esta manera el diccionario se carga primero y las otras partes de la aplicación pueden depender de él de forma segura.

Editar: Tenga en cuenta que esto aumentará el tiempo de carga inicial para su aplicación por el tiempo que tome el método load (). Si quieres evitar eso, puedes usar un solucionador en tu ruta.

43

Author: GMK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-13 19:30:59

También ver APP_INITIALIZER , que se describe como;

Una función que se ejecutará cuando se inicialice una aplicación.

3

Author: Stuart Hallows,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-09 06:58:50

Intenta crear service constructor y luego llámalo en ngOnInit() de tu componente.

Módulo de servicio

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

Componente

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

Espero que esto ayude.

1

Author: Bhushan Gadekar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-04 11:49:44

score 38 · Accepted Answer

Mueva la lógica en su constructor SocketService a un método en su lugar y luego llame a eso en el constructor de su componente principal o 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]);