Angular 4+ ngOnDestroy () w służbie - zniszcz obserwowalne

W aplikacji kątowej mamy ngOnDestroy()hak cyklu życia dla komponentu / dyrektywy i używamy tego haka do anulowania subskrypcji obserwabli.

Chcę wyczyścić / zniszczyć obserwowalne, które są tworzone w @injectable()usłudze. Widziałem posty, w których napisano, że ngOnDestroy()można ich również użyć w usłudze.

Ale czy jest to dobra praktyka i jedyny sposób, aby to zrobić i kiedy zostanie wywołana? ktoś proszę o wyjaśnienie.

Hak cyklu życia OnDestroy jest dostępny w dostawcach. Według dokumentów:

Hak cyklu życia wywoływany w przypadku zniszczenia dyrektywy, potoku lub usługi.

Oto przykład :

@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)
  }
}

Zauważ, że w powyższym kodzie Serviceznajduje się instancja należąca do Fookomponentu, więc może zostać zniszczona, gdy Foozostanie zniszczona.

W przypadku dostawców należących do wtryskiwacza root nastąpi to po zniszczeniu aplikacji, jest to pomocne w celu uniknięcia wycieków pamięci przy wielokrotnym ładowaniu, np. W testach.

Kiedy dostawca z nadrzędnego wtryskiwacza jest subskrybowany w komponencie podrzędnym, nie zostanie zniszczony po zniszczeniu komponentu, to jest obowiązkiem komponentu, aby anulować subskrypcję komponentu ngOnDestroy(jak wyjaśnia inna odpowiedź).

Utwórz zmienną w swojej usłudze

subscriptions: Subscriptions[]=[];

Wypchnij każdą subskrypcję do tablicy jako

this.subscriptions.push(...)

Napisz dispose()metodę

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

Wywołaj tę metodę ze swojego komponentu podczas ngOnDestroy

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

Wolę ten takeUntil(onDestroy$)wzorzec udostępniany przez operatorów pipable. Podoba mi się, że ten wzorzec jest bardziej zwięzły, bardziej przejrzysty i jasno przekazuje zamiar zakończenia subskrypcji po wykonaniu instrukcjiOnDestroy haka cyklu życia.

Ten wzorzec działa w przypadku usług, a także składników subskrybujących wstrzyknięte obserwable. Poniższy kod szkieletowy powinien zawierać wystarczająco dużo szczegółów, aby zintegrować wzorzec z własną usługą. Wyobraź sobie, że importujesz usługę o nazwie 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();
  }

Temat kiedy / jak wypisać się z subskrypcji jest obszernie omówiony tutaj: Angular / RxJs Kiedy powinienem wypisać się z subskrypcji

Dla wyjaśnienia - nie musisz niszczyć, Observablesa jedynie dokonane dla nich subskrypcje.

Wygląda na to, że inni zauważyli, że możesz teraz również korzystać ngOnDestroyz usług. Link: https://angular.io/api/core/OnDestroy

Ostrożnie, jeśli używasz tokenów

Próbując uczynić moją aplikację tak modułową, jak to tylko możliwe, często używam tokenów dostawców do świadczenia usługi dla składnika. Wygląda na to, że te NIE otrzymująngOnDestroy metod o nazwie :-(

na przykład.

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

Z sekcją dostawcy w komponencie:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

Mój ShopPaymentPanelServiceNIE ma swojegongOnDestroy metody wywoływanej, gdy składnik jest usuwany. Po prostu odkryłem to na własnej skórze!

Obejściem problemu jest udostępnienie usługi w połączeniu z useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

Kiedy to zrobiłem, ngOnDisposezostał wezwany zgodnie z oczekiwaniami.

Nie jestem pewien, czy jest to błąd, czy nie, ale bardzo nieoczekiwany.