example - ondestroy angular 6

Angular 4+ ngOnDestroy() en servicio-destruir observable

Question

En una aplicación angular, tenemos un gancho de ciclo de vida ngOnDestroy() para un componente / directiva y usamos este gancho para cancelar la suscripción de los observables.

Quiero borrar / eliminar observables que se crean en un servicio @injectable() . Vi algunas publicaciones que decían que ngOnDestroy() se puede usar en un servicio.

Pero, ¿es una buena práctica y la única forma de hacerlo y cuándo se llamará? Alguien por favor aclarar.

Answer 1

Crea una variable en tu servicio

subscriptions: Subscriptions[]=[];

Empuje cada uno de sus suscribirse a la matriz como

this.subscriptions.push(...)

Escribir un método dispose()

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

Llame a este método desde su componente durante ngOnDestroy

ngOnDestroy(){
   this.service.dispose();
 }

Answer 2

Prefiero este takeUntil(onDestroy$) habilitado por operadores pipables. Me gusta que este patrón sea más conciso, más limpio, y claramente transmite la intención de matar una suscripción tras la ejecución del gancho del ciclo de vida de OnDestroy .

Este patrón funciona tanto para servicios como para componentes que se suscriben a observables inyectados. El siguiente código esqueleto debería brindarle suficientes detalles para integrar el patrón en su propio servicio. Imagine que está 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<boolean>();

  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`

Answer 3

Solo para aclarar: no es necesario destruir los Observables solo las suscripciones hechas a ellos.

Parece que otros han señalado que ahora también puedes usar ngOnDestroy con los servicios. Enlace: OnDestroy

Answer 4

OnDestroy gancho 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 example :

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

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

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

@Component({
  selector: ''my-app'',
  template: `<foo *ngIf="isFoo"></foo>`,
})
export class App {
  isFoo = true;

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

Tenga en cuenta que en el código anterior, el Service es una instancia que pertenece al componente Foo , por lo que se puede destruir cuando se destruye Foo .

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 bootstraps, es decir, en las pruebas.

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