Estoy comprobando el estado de la red en mi aplicación Angular desde network.service.ts
// red.servicio.ts
import { Injectable } from '@angular/core'; import { BehaviorSubject } from "rxjs"; @Injectable() export class NetworkStatusService { public status: BehaviorSubject<any> = new BehaviorSubject<any>(null); public appStatus() { window.addEventListener('online', this.networkStatusChanged.bind(this)); window.addEventListener('offline', this.networkStatusChanged.bind(this)); } public networkStatusChanged(): void { this.status.next(!navigator.onLine); } }En mi componente, estoy inyectando este servicio y en ngOnInit,
Llamo a este método appStatus del servicio y luego me suscribo al estado (BehaviorSubject) para obtener el valor.
En mi componente:
public ngOnInit() { this.networkService.appStatus(); this.networkService.status.subscribe((x)=>{ console.log('status here', x); if(x) { // do something } }); }Esto funciona y registra el valor booleano cada vez que la aplicación está en línea o fuera de línea. Pero el problema es que tendría que llamar a este método y luego suscribirme y cancelar la suscripción en casi todos los componentes. Sé que addEventListener no devuelve un valor, pero ¿hay alguna manera de refactorizar esto, de modo que solo llame a appStatus() desde el componente y devuelva un valor booleano (verdadero/falso) siempre que la aplicación esté fuera de línea/en línea?
Simplemente puede crear un getter en cualquier componente donde desee llamar a appStatus, devolverá el valor del estado de la red.
public get appStatus () { return navigator.onLine }Pero si necesita escuchar cada vez que BehaviorSubject emite valor, debe suscribirse.
Agregue sus oyentes dentro del constructor de la clase de servicio en lugar de la función appStatus(). De esta manera, no tiene que llamarlo cada vez o desde cada componente.
import { Injectable } from '@angular/core'; import { BehaviorSubject } from "rxjs"; @Injectable() export class NetworkStatusService { public status: BehaviorSubject<any> = new BehaviorSubject<any>(null); constructor() { window.addEventListener('online', this.networkStatusChanged.bind(this)); window.addEventListener('offline', this.networkStatusChanged.bind(this)); } public networkStatusChanged(): void { this.status.next(!navigator.onLine); } }Ahora suscríbase a this.networkService.status desde cualquier componente como lo está haciendo actualmente.