Angular 4+ ngOnDestroy () hizmette - gözlemlenebilir olanı yok et

Açısal bir uygulamada ngOnDestroy(), bir bileşen / yönerge için yaşam döngüsü kancasına sahibiz ve bu kancayı gözlemlenebilirlerin aboneliğinden çıkmak için kullanıyoruz.

Bir @injectable()hizmette yaratılan net / arzu edilen gözlemlenebilir istiyorum . Bunun ngOnDestroy()bir serviste de kullanılabileceğini söyleyen bazı yazılar gördüm .

Ancak, bu iyi bir uygulama mı ve bunu yapmanın tek yolu mu ve ne zaman çağrılacak? birisi lütfen açıklığa kavuştursun.

OnDestroy yaşam döngüsü kancası sağlayıcılarda mevcuttur. Dokümanlara göre:

Bir yönerge, boru veya hizmet yok edildiğinde çağrılan yaşam döngüsü kancası.

İşte bir örnek :

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

Yukarıdaki kodda Service, Foobileşene ait bir örnek olduğuna dikkat edin , bu nedenle yok edildiğinde Fooyok edilebilir.

Kök enjektöre ait sağlayıcılar için bu, uygulama yok edildiğinde gerçekleşir, bu, birden çok önyükleme ile bellek sızıntılarını, yani testlerde önlemek için yararlıdır.

Üst enjektörden bir sağlayıcı alt bileşene abone olduğunda, bileşen yok edildiğinde yok edilmeyecektir, bu bileşenin aboneliğini iptal etme sorumluluğudur ngOnDestroy(başka bir yanıtın açıkladığı gibi).

Hizmetinizde bir değişken oluşturun

subscriptions: Subscriptions[]=[];

Her abonenizi diziye şu şekilde itin:

this.subscriptions.push(...)

Bir dispose()yöntem yazın

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

NgOnDestroy sırasında bileşeninizden bu yöntemi çağırın

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

takeUntil(onDestroy$)Borç verilebilir operatörlerin etkinleştirdiği bu modeli tercih ederim . Bu modelin daha özlü, daha temiz olmasını seviyorum ve OnDestroyyaşam döngüsü kancasının yürütülmesi üzerine bir aboneliği sonlandırma niyetini açıkça iletiyor .

Bu model servisler için olduğu kadar enjekte edilen gözlemlenebilirlere abone olan bileşenler için de işe yarar. Aşağıdaki iskelet kodu, kalıbı kendi hizmetinize entegre etmek için size yeterli ayrıntı vermelidir. InjectedService... adlı bir hizmeti içe aktardığınızı hayal edin ...

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();
  }

Abonelikten ne zaman / nasıl çıkılacağı burada kapsamlı bir şekilde ele alınmaktadır : Angular / RxJs "Abonelik" üyeliğinden ne zaman çıkmalıyım?

Sadece açıklığa kavuşturmak için - yok etmeniz gerekmez, Observablesyalnızca onlara yapılan abonelikleri kaldırmanız gerekir.

Görünüşe göre diğerleri artık ngOnDestroyhizmetlerle de kullanabileceğinizi belirtmişler . Bağlantı: https://angular.io/api/core/OnDestroy

Jeton kullanılıyorsa dikkat

Uygulamamı olabildiğince modüler yapmaya çalışırken, bir bileşene hizmet sağlamak için genellikle sağlayıcı belirteçlerini kullanacağım. Görünüşe göre bunlar, ngOnDestroyyöntemlerini :-(

Örneğin.

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

Bir bileşendeki sağlayıcı bölümü ile:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

Bileşen atıldığında benim yönteminin çağrılan yöntemi ShopPaymentPanelServiceYOKTUR ngOnDestroy. Bunu zor yoldan öğrendim!

Geçici çözüm, hizmeti ile birlikte sağlamaktır useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

Bunu yaptığımda ngOnDisposebeklendiği gibi çağrıldı.

Bunun bir hata olup olmadığından emin değilim, ancak çok beklenmedik.