Angular Academy · Lektion

Abmelden und Memory-Leaks

Vermeiden Sie Leaks mit takeUntilDestroyed.

Abmelden und Memory-Leaks ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem mit Speicherlecks

Wenn Sie in einer Komponente ein langlebiges Observable abonnieren und das Abonnement nie beenden, wird der Callback auch nach der Zerstörung der Komponente weiter ausgeführt. Dadurch entsteht ein Speicherleck, und es kann zu Fehlern oder mehrfach ausgeführten Aktionen kommen.

Manuelles Abbestellen

Die grundlegende Lösung: Speichern Sie die Subscription und beenden Sie sie in ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

Mehrere Abonnements verwalten

Eine einzelne Subscription kann mit .add() untergeordnete Abonnements sammeln. Ein Aufruf von unsubscribe() beendet anschließend alle zusammen.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular stellt takeUntilDestroyed() bereit. Damit wird der Datenstrom automatisch abgeschlossen, wenn die Komponente zerstört wird – ein manuelles ngOnDestroy ist nicht erforderlich.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

Anforderung an den Injection-Kontext

Wenn Sie takeUntilDestroyed() ohne Argument aufrufen, muss die Funktion in einem Injection-Kontext ausgeführt werden (etwa im Konstruktor). Außerhalb dieses Kontexts übergeben Sie explizit ein DestroyRef.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

Das takeUntil-Muster (klassisch)

Vor takeUntilDestroyed verwendete das Standardmuster ein Subject, das in ngOnDestroy einen Wert ausgibt.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Datenströme, die abgeschlossen werden, benötigen keine Bereinigung

HttpClient-Anfragen geben einmal einen Wert aus und werden anschließend abgeschlossen, sodass sie selbst aufräumen. In der Regel müssen Sie das Abonnement eines einzelnen HTTP-Aufrufs nicht beenden – takeUntilDestroyed ist jedoch weiterhin unbedenklich.

Die async-Pipe übernimmt das für Sie

Der beste Ansatz für Templates: Lassen Sie die async-Pipe das Abonnieren und Abbestellen automatisch übernehmen. Wir behandeln sie in der nächsten Lektion.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

Anzeichen für ein Speicherleck durch ein Abonnement

Doppelte Netzwerkanfragen, Handler, die nach der Navigation noch ausgeführt werden, stetig wachsender Speicherverbrauch in den DevTools oder der Fehler "Cannot read property of destroyed view" weisen oft auf vergessene Abbestellungen hin.

toSignal bereinigt ebenfalls automatisch

Auch beim Umwandeln eines Observables in ein Signal mit toSignal() wird das Abonnement automatisch beendet, wenn der zugehörige Kontext zerstört wird.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

Den passenden Ansatz wählen

Bevorzugen Sie in Templates die async-Pipe oder toSignal. Verwenden Sie takeUntilDestroyed() für manuelle Abonnements und greifen Sie nur bei Bedarf auf eine Sammlung von Subscriptions zurück.

Kurzer Test

Testen Sie Ihr Verständnis vom Abbestellen.

Zusammenfassung: Abbestellungen und Speicherlecks

Beenden Sie langlebige Abonnements immer ordnungsgemäß.

takeUntilDestroyed() schließt den Datenstrom beim Zerstören automatisch ab.
Die async-Pipe und toSignal() verwalten Abonnements für Sie.
Einzelne HTTP-Aufrufe werden automatisch abgeschlossen.

Als Nächstes: die async-Pipe im Detail.

Häufig gestellte Fragen

Ist die Lektion „Abmelden und Memory-Leaks“ kostenlos?

Ja — der vollständige Text von „Abmelden und Memory-Leaks“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Abmelden und Memory-Leaks“?

Vermeiden Sie Leaks mit takeUntilDestroyed. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Abmelden und Memory-Leaks“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy