Angular 4+ ngOnDestroy() en servicio – destruir observable

Luego de de nuestra extensa búsqueda de datos pudimos solucionar este apuro que pueden tener ciertos de nuestros usuarios. Te brindamos la respuesta y nuestro deseo es que sea de gran apoyo.

Solución:

El enlace del ciclo de vida de OnDestroy está disponible en los proveedores. Según los documentos:

Gancho de ciclo de vida que se llama cuando se destruye una directiva, tubería o servicio.

Aquí hay un ejemplo:

@Injectable()
class Service implements OnDestroy 
  ngOnDestroy() 
    console.log('Service destroy')
  


@Component(
  selector: 'foo',
  template: `foo`,
  providers: [Service]
)
export class Foo implements OnDestroy 
  constructor(service: Service) 

  ngOnDestroy() 
    console.log('foo destroy')
  


@Component(
  selector: 'my-app',
  template: ``,
)
export class App 
  isFoo = true;

  constructor() 
    setTimeout(() => 
        this.isFoo = false;
    , 1000)
  

Observe que en el código anterior Service es una instancia que pertenece a Foo componente, por lo que puede ser destruido cuando Foo Esta destruido.

Para los proveedores que pertenecen al inyector raíz, esto sucederá en la destrucción de la aplicación, esto es útil para evitar pérdidas de memoria con múltiples arranques, es decir, en las pruebas.

Cuando un proveedor del inyector principal está suscrito en un componente secundario, no se destruirá en la destrucción del componente, es responsabilidad del componente darse de baja en el componente ngOnDestroy (como explica otra respuesta).

Crea una variable en tu servicio

subscriptions: Subscriptions[]=[];

Empuje cada uno de sus suscriptores a la array como

this.subscriptions.push(...)

Escribe un dispose() método

dispose(){
this.subscriptions.forEach(subscription =>subscription.unsubscribe())

Llame a este método desde su componente durante ngOnDestroy

ngOnDestroy()
   this.service.dispose();
 

prefiero esto takeUntil(onDestroy$) patrón habilitado por operadores canalizables. Me gusta que este patrón sea más conciso, más limpio y transmita claramente la intención de cancelar una suscripción al ejecutar el OnDestroy gancho de ciclo de vida.

Este patrón funciona tanto para servicios como para componentes que se suscriben a observables inyectados. El código de esqueleto a continuación debería brindarle suficientes detalles para integrar el patrón en su propio servicio. Imagina que estás importando un servicio llamado InjectedService…

import  InjectedService  from 'where/it/lives';
import  Injectable, OnDestroy  from '@angular/core';
import  Observable  from 'rxjs/Rx';
import  takeUntil  from 'rxjs/operators';
import  Subject  from 'rxjs/Subject';

@Injectable()
export class MyService implements OnDestroy {

  private onDestroy$ = new Subject();

  constructor(
    private injectedService: InjectedService
  ) 
    // Subscribe to service, and automatically unsubscribe upon `ngOnDestroy`
    this.injectedService.observableThing().pipe(
      takeUntil(this.onDestroy$)
    ).subscribe(latestTask => 
      if (latestTask) 
        this.initializeDraftAllocations();
      
    );
  

  ngOnDestroy() 
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
  

El tema de cuándo/cómo darse de baja se cubre ampliamente aquí: Angular/RxJs ¿Cuándo debo darme de baja de `Suscripción`?

Reseñas y valoraciones de la guía

---

---

Utiliza Nuestro Buscador