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 Service
znajduje się instancja należąca do Foo
komponentu, więc może zostać zniszczona, gdy Foo
zostanie 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ź).
class Service implements OnDestroy
? A jak myślisz, kiedy to się nazywa, jeśli usługa jest świadczona na poziomie modułuimplements OnDestroy
nie wpływa na nic, ale można je dodać w celu uzupełnienia. Zostanie wywołany, gdy moduł zostanie zniszczony, npappModule.destroy()
. Może to być przydatne w przypadku wielu inicjalizacji aplikacji.Utwórz zmienną w swojej usłudze
Wypchnij każdą subskrypcję do tablicy jako
Napisz
dispose()
metodęWywołaj tę metodę ze swojego komponentu podczas ngOnDestroy
źródło
@injectables
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
...Temat kiedy / jak wypisać się z subskrypcji jest obszernie omówiony tutaj: Angular / RxJs Kiedy powinienem wypisać się z subskrypcji
źródło
Dla wyjaśnienia - nie musisz niszczyć,
Observables
a jedynie dokonane dla nich subskrypcje.Wygląda na to, że inni zauważyli, że możesz teraz również korzystać
ngOnDestroy
z usług. Link: https://angular.io/api/core/OnDestroyźródło
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.
Z sekcją dostawcy w komponencie:
Mój
ShopPaymentPanelService
NIE 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
.Kiedy to zrobiłem,
ngOnDispose
został wezwany zgodnie z oczekiwaniami.Nie jestem pewien, czy jest to błąd, czy nie, ale bardzo nieoczekiwany.
źródło