Angular 4+ ngOnDestroy () dalam layanan - hancurkan yang dapat diamati

Dalam aplikasi bersudut kita memiliki ngOnDestroy()hook siklus hidup untuk sebuah komponen / direktif dan kita menggunakan hook ini untuk berhenti berlangganan observable.

Saya ingin menghapus / menghancurkan observasi yang dibuat dalam sebuah @injectable()layanan. Saya melihat beberapa posting yang mengatakan bahwa ngOnDestroy()dapat digunakan dalam layanan juga.

Tapi, apakah ini praktik yang baik dan satu-satunya cara untuk melakukannya dan Kapan itu akan dipanggil? seseorang tolong klarifikasi.

Pengait siklus hidup OnDestroy tersedia di penyedia. Menurut dokumen:

Pengait siklus hidup yang dipanggil saat perintah, pipa, atau layanan dimusnahkan.

Berikut contohnya :

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

Perhatikan bahwa kode di atas Serviceadalah sebuah instance milik Fookomponen, sehingga dapat dimusnahkan jika Foodimusnahkan.

Untuk penyedia yang termasuk dalam root injector, hal ini akan terjadi pada penghancuran aplikasi, hal ini berguna untuk menghindari kebocoran memori dengan beberapa bootstrap, misalnya dalam pengujian.

Ketika penyedia dari injektor induk berlangganan komponen anak, itu tidak akan dimusnahkan saat komponen dihancurkan, ini adalah tanggung jawab komponen untuk berhenti berlangganan dalam komponen ngOnDestroy(seperti jawaban lain menjelaskan).

Buat variabel dalam layanan Anda

subscriptions: Subscriptions[]=[];

Dorong setiap langganan Anda ke array sebagai

this.subscriptions.push(...)

Tulis dispose()metode

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

Panggil metode ini dari komponen Anda selama ngOnDestroy

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

Saya lebih suka takeUntil(onDestroy$)pola ini diaktifkan oleh operator pipable. Saya suka bahwa pola ini lebih ringkas, lebih bersih, dan dengan jelas menyampaikan maksud untuk menghentikan langganan setelah eksekusi OnDestroypengait siklus proses.

Pola ini berfungsi untuk layanan serta komponen yang berlangganan observable yang diinjeksi. Kode kerangka di bawah ini akan memberi Anda cukup detail untuk mengintegrasikan pola ke dalam layanan Anda sendiri. Bayangkan Anda sedang mengimpor layanan bernamaInjectedService ...

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

Topik kapan / bagaimana berhenti berlangganan dibahas secara luas di sini: Angular / RxJs Kapan saya harus berhenti berlangganan dari `Subscription`

Hanya untuk memperjelas - Anda tidak perlu menghancurkan Observables tetapi hanya langganan yang dibuat untuk mereka.

Sepertinya orang lain telah menunjukkan bahwa Anda sekarang dapat menggunakan ngOnDestroylayanan juga. Tautan: https://angular.io/api/core/OnDestroy

Hati-hati jika menggunakan token

Dalam mencoba membuat aplikasi saya sesederhana mungkin, saya akan sering menggunakan token penyedia untuk menyediakan layanan ke sebuah komponen. Tampaknya ini TIDAK mendapatkan merekangOnDestroy metode disebut :-(

misalnya.

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

Dengan bagian penyedia dalam sebuah komponen:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

Saya ShopPaymentPanelServiceTIDAK memilikinyangOnDestroy metode yang dipanggil saat komponen dibuang. Saya baru saja menemukan ini dengan cara yang sulit!

Solusinya adalah menyediakan layanan terkait dengan useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

Ketika saya melakukan ini, ngOnDisposedipanggil seperti yang diharapkan.

Tidak yakin apakah ini bug atau bukan tapi sangat tidak terduga.