Кутова 4+ ngOnDestroy () в експлуатації - знищувати спостережувані

У кутовому додатку ми маємо ngOnDestroy()гачок життєвого циклу для компонента / директиви, і ми використовуємо цей хук, щоб скасувати підписку на спостережувані.

Я хочу очистити / відмітити спостережувані, які створені в @injectable()службі. Я бачив деякі дописи, в яких говорилося, що ngOnDestroy()їх також можна використовувати в службі.

Але чи це хороша практика та єдиний спосіб це зробити, і коли це буде викликано? хтось, будь ласка, поясніть.

Гак життєвого циклу OnDestroy доступний у постачальників. Відповідно до документів:

Гак життєвого циклу, який викликається при знищенні директиви, труби або служби.

Ось приклад :

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

Зверніть увагу, що у наведеному вище коді Serviceє екземпляр, який належить Fooкомпоненту, тому він може бути знищений при Fooзнищенні.

Для постачальників, які належать до кореневого інжектора, це відбуватиметься при знищенні програми, це корисно, щоб уникнути витоків пам’яті з кількома завантажувальними стріппами, тобто під час тестів.

Коли постачальник з батьківського інжектора підписаний на дочірній компонент, він не буде знищений при знищенні компонента, це відповідальність компонента - скасувати підписку на компонент ngOnDestroy(як пояснюється в іншій відповіді).

Створіть змінну у своїй службі

subscriptions: Subscriptions[]=[];

Натисніть кожного з ваших підписаних на масив як

this.subscriptions.push(...)

Напишіть dispose()метод

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

Викличте цей метод із вашого компонента під час ngOnDestroy

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

Мені більше подобається цей takeUntil(onDestroy$)шаблон, який увімкнено піпабельними операторами. Мені подобається, що цей шаблон є більш стислим, більш чистим, і він чітко передає намір вбити підписку після виконання OnDestroyгачка життєвого циклу.

Цей шаблон працює як для служб, так і для компонентів, що підписуються на інжектовані спостережувані. Код скелета, наведений нижче, повинен дати вам достатньо деталей, щоб інтегрувати шаблон у власну службу. Уявіть, що ви імпортуєте послугу під назвою 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();
  }

Тема, коли / як скасувати підписку, тут широко висвітлена: Angular / RxJs Коли слід скасувати підписку на `Підписка`

Тільки для уточнення - вам не потрібно знищувати, Observablesа лише підписки, зроблені на них.

Схоже , інші відзначають, що тепер ви можете використовувати ngOnDestroyз послугами , а також. Посилання: https://angular.io/api/core/OnDestroy

Обережно при використанні токенів

Намагаючись зробити свою програму максимально модульною, я часто використовую маркери постачальника для надання послуги компоненту. Здається, вони НЕ отримують своїх ngOnDestroyметодів під назвою :-(

напр.

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

З розділом провайдера в компоненті:

 {
     provide: PAYMENTPANEL_SERVICE,
     useExisting: ShopPaymentPanelService
 }

My ShopPaymentPanelServiceНЕ ngOnDestroyвикликає метод, коли компонент утилізується. Я просто це знайшов на важкому шляху!

Обхідним шляхом є надання послуги спільно з useExisting.

[
   ShopPaymentPanelService,

   {
       provide: PAYMENTPANEL_SERVICE,
       useExisting: ShopPaymentPanelService
   }
]

Коли я це зробив, мене ngOnDisposeвикликали, як очікували.

Не впевнений, це помилка чи ні, але дуже несподіване.