Der OnDestroy- Lebenszyklus-Hook ist bei Anbietern verfügbar. Laut den Dokumenten:
Lifecycle-Hook, der aufgerufen wird, wenn eine Direktive, eine Pipe oder ein Dienst zerstört wird.
Hier ist ein Beispiel :
@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)
}
}
Beachten Sie, dass es sich bei dem obigen Code Service
um eine Instanz handelt, die zur Foo
Komponente gehört, sodass sie bei Zerstörung Foo
zerstört werden kann.
Für Anbieter, die zum Root-Injector gehören, geschieht dies bei der Zerstörung von Anwendungen. Dies ist hilfreich, um Speicherverluste bei mehreren Bootstraps, dh bei Tests, zu vermeiden.
Wenn ein Anbieter vom übergeordneten Injektor eine untergeordnete Komponente abonniert hat, wird diese bei der Zerstörung der Komponente nicht zerstört. Dies liegt in der Verantwortung der Komponente, sich in der Komponente abzumelden ngOnDestroy
(wie in einer anderen Antwort erläutert).
class Service implements OnDestroy
? Und was denkst du, wenn dies aufgerufen wird, wenn der Service auf Modulebene bereitgestellt wirdimplements OnDestroy
beeinflusst nichts, kann aber der Vollständigkeit halber hinzugefügt werden. Es wird aufgerufen, wenn ein Modul zerstört wird, wie zappModule.destroy()
. Dies kann für mehrere App-Initialisierungen hilfreich sein.Erstellen Sie eine Variable in Ihrem Service
Drücken Sie jedes Ihrer Abonnements auf das Array als
Schreiben Sie eine
dispose()
MethodeRufen Sie diese Methode während ngOnDestroy von Ihrer Komponente aus auf
quelle
@injectables
Ich bevorzuge dieses
takeUntil(onDestroy$)
Muster, das von Pipeline-Betreibern aktiviert wird. Ich mag es, dass dieses Muster prägnanter und sauberer ist und eindeutig die Absicht vermittelt, ein Abonnement bei Ausführung des zu löschenOnDestroy
Lebenszyklus-Hooks zu löschen.Dieses Muster funktioniert sowohl für Dienste als auch für Komponenten, die injizierte Observable abonnieren. Der folgende Skelettcode sollte Ihnen genügend Details geben, um das Muster in Ihren eigenen Dienst zu integrieren. Stellen Sie sich vor, Sie importieren einen Dienst namens
InjectedService
...Das Thema wann / wie man sich abmeldet wird hier ausführlich behandelt: Angular / RxJs Wann sollte ich mich von `Subscription` abmelden
quelle
Nur zur Klarstellung - Sie müssen nicht zerstören
Observables
sondern nur die Abonnements, die für sie abgeschlossen wurden.Es scheint, als hätten andere darauf hingewiesen, dass Sie jetzt auch
ngOnDestroy
mit Diensten arbeiten können. Link: https://angular.io/api/core/OnDestroyquelle
Vorsicht bei der Verwendung von Token
Bei dem Versuch, meine Anwendung so modular wie möglich zu gestalten, verwende ich häufig Provider-Token, um einen Dienst für eine Komponente bereitzustellen. Es scheint, dass diese ihre
ngOnDestroy
Methoden NICHT erhalten :-(z.B.
Mit einem Provider-Bereich in einer Komponente:
Mein
ShopPaymentPanelService
hat NICHT seinengOnDestroy
Methode von aufgerufen, wenn die Komponente entsorgt wird. Ich habe das gerade auf die harte Tour herausgefunden!Eine Problemumgehung besteht darin, den Service in Verbindung mit bereitzustellen
useExisting
.Als ich das tat,
ngOnDispose
wurde der wie erwartet aufgerufen.Ich bin mir nicht sicher, ob dies ein Fehler ist oder nicht, aber sehr unerwartet.
quelle