Angular Academy · Lektion

Effect-Bereinigung und Lebenszyklus

Bereinigen Sie Ressourcen innerhalb von Effects.

Effect-Bereinigung und Lebenszyklus 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.

Warum Aufräumen wichtig ist

Ein Effekt kann Ressourcen starten: Timer, Subscriptions oder Event-Listener. Bei jedem erneuten Ausführen des Effekts muss die alte Ressource zuerst beendet werden – andernfalls entstehen Leaks bei Timern und Listenern. Angular stellt dafür den Hook onCleanup bereit.

Der onCleanup-Callback

Die Effektfunktion erhält eine Funktion onCleanup. Registrieren Sie damit einen Callback zum Aufräumen; Angular ruft ihn vor dem nächsten Durchlauf und bei der Zerstörung auf.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

Das Aufräumen erfolgt vor jedem erneuten Durchlauf

Wenn sich eine Abhängigkeit ändert, ruft Angular zuerst das registrierte Aufräumen auf und führt anschließend den Effektkörper erneut aus. So ist garantiert immer nur eine Ressource aktiv.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Event-Listener aufräumen

DOM-Listener, die in einem Effekt hinzugefügt werden, müssen beim Aufräumen entfernt werden, um doppelte Handler und Leaks zu vermeiden.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Subscriptions aufräumen

Wenn ein Effekt ein Observable abonniert, heben Sie das Abonnement beim Aufräumen auf. (Oft würden Sie dafür andere Tools verwenden, aber dieses Beispiel zeigt das grundlegende Muster.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Beim Zerstören aufräumen

Wenn die Komponente, der der Effekt gehört, zerstört wird, führt Angular automatisch das abschließende Aufräumen aus und zerstört anschließend den Effekt. Es bleiben keine undichten Timer zurück.

Reihenfolge: Aufräumen, dann Körper

Beim allerersten Ausführen eines Effekts gibt es nichts aufzuräumen. Ab dem zweiten Durchlauf lautet die Reihenfolge immer: cleanup -> body.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Aufwendige Arbeit ohne Aufräumen vermeiden

Jede langlebige Ressource, die in einem Effekt gestartet wird, sollte ein entsprechendes Aufräumen haben. Ein häufiger Fehler ist, das Aufräumen zu vergessen, sodass sich bei jeder Änderung einer Abhängigkeit weitere Intervalle ansammeln.

Die Option manualCleanup

Bei Effekten, die außerhalb einer Komponente erstellt werden (z. B. in einem Root-Service, der dauerhaft lebt), können Sie die Option manualCleanup verwenden und anschließend selbst ref.destroy() aufrufen, sobald es angemessen ist.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef als Alternative

Für das Aufräumen außerhalb von Effekten können Sie DestroyRef injizieren und mit onDestroy Callbacks registrieren. Verwenden Sie innerhalb von Effekten bevorzugt onCleanup für das Aufräumen pro Durchlauf.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Alles zusammenführen

Ein Effekt zur verzögerten Synchronisierung: Bei jeder Wertänderung wird der vorherige Timer abgebrochen und ein neuer Speichervorgang geplant.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Kurzer Test

Testen Sie Ihr Verständnis des Aufräumens von Effekten.

Zusammenfassung: Aufräumen und Lebenszyklus von Effekten

Verwenden Sie den Parameter onCleanup, um innerhalb eines Effekts gestartete Ressourcen zu beenden.

Das Aufräumen erfolgt vor jedem erneuten Durchlauf und bei der Zerstörung.
Räumen Sie Timer, Listener und Subscriptions immer auf.
manualCleanup für langlebige Effekte; DestroyRef für allgemeines Aufräumen.

Als Nächstes: linkedSignal und fortgeschrittene Muster.

Häufig gestellte Fragen

Ist die Lektion „Effect-Bereinigung und Lebenszyklus“ kostenlos?

Ja — der vollständige Text von „Effect-Bereinigung und Lebenszyklus“ 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 „Effect-Bereinigung und Lebenszyklus“?

Bereinigen Sie Ressourcen innerhalb von Effects. 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 „Effect-Bereinigung und Lebenszyklus“?

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

Berechnete Signals
Effects und Seiteneffekte
Effect-Bereinigung und Lebenszyklus
linkedSignal und fortgeschrittene Muster

← Zurück zu Angular Academy