Angular 4+ ngOnDestroy () in service - distruggi osservabile

In un'applicazione angolare abbiamo un ngOnDestroy()hook del ciclo di vita per un componente / direttiva e utilizziamo questo hook per annullare la sottoscrizione delle osservabili.

Voglio cancellare / destory osservabili che vengono creati in un @injectable()servizio. Ho visto alcuni post che dicevano che ngOnDestroy()può essere utilizzato anche in un servizio.

Ma è una buona pratica e l'unico modo per farlo e quando verrà chiamato? qualcuno per favore chiarisca.

L' hook del ciclo di vita di OnDestroy è disponibile nei provider. Secondo i documenti:

Hook del ciclo di vita che viene chiamato quando una direttiva, una pipe o un servizio viene distrutto.

Ecco un esempio :

@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: `<foo *ngIf="isFoo"></foo>`,
})
export class App {
  isFoo = true;

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

Si noti che nel codice sopra Servicec'è un'istanza che appartiene al Foocomponente, quindi può essere distrutta quando Fooviene distrutta.

Per i provider che appartengono all'iniettore di root, ciò accadrà durante la distruzione dell'applicazione, questo è utile per evitare perdite di memoria con più bootstraps, cioè nei test.

Quando un provider dall'iniettore principale viene sottoscritto nel componente figlio, non verrà distrutto durante la distruzione del componente, questa è responsabilità del componente annullare l'iscrizione al componente ngOnDestroy(come spiega un'altra risposta).

Crea una variabile nel tuo servizio

subscriptions: Subscriptions[]=[];

Esegui il push di ciascuna delle tue iscrizioni all'array come

this.subscriptions.push(...)

Scrivi un dispose()metodo

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

Chiama questo metodo dal tuo componente durante ngOnDestroy

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

Preferisco questo takeUntil(onDestroy$)modello abilitato dagli operatori pipable. Mi piace che questo modello sia più conciso, più pulito e trasmetta chiaramente l'intento di terminare un abbonamento all'esecuzione OnDestroydell'hook del ciclo di vita.

Questo modello funziona sia per i servizi che per i componenti che sottoscrivono osservabili iniettati. Il codice dello scheletro di seguito dovrebbe fornire dettagli sufficienti per integrare il modello nel tuo servizio. Immagina di importare un servizio chiamato 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();
  }

L'argomento di quando / come annullare l'iscrizione è trattato ampiamente qui: Angular / RxJs Quando dovrei cancellarmi da `Subscription`

Giusto per chiarire: non è necessario distruggere Observablesma solo gli abbonamenti effettuati a loro.

Sembra che altri abbiano sottolineato che ora puoi utilizzare anche ngOnDestroycon i servizi. Collegamento: https://angular.io/api/core/OnDestroy

Attenzione se si utilizzano gettoni

Nel tentativo di rendere la mia applicazione il più modulare possibile, userò spesso i token del provider per fornire un servizio a un componente. Sembra che questi NON ottengano i loro ngOnDestroymetodi chiamati :-(

per esempio.

export const PAYMENTPANEL_SERVICE = new InjectionToken<PaymentPanelService>('PAYMENTPANEL_SERVICE');

Con una sezione provider in un componente:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

My ShopPaymentPanelServiceNON ha il suo ngOnDestroymetodo chiamato quando il componente viene eliminato. L'ho appena scoperto nel modo più duro!

Una soluzione alternativa consiste nel fornire il servizio insieme a useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

Quando l'ho fatto, è ngOnDisposestato chiamato come previsto.

Non sono sicuro che si tratti di un bug o meno, ma molto inaspettato.