0Pricing
Angular Academy · Lektion

Effects und Seiteneffekte

Reagieren Sie mit Effects auf Änderungen an Signals.

Effects und Seiteneffekte ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Was ist ein Effekt

Ein effect() führt eine Funktion immer dann aus, wenn sich ein von ihr gelesenes Signal ändert. Anders als computed dienen Effekte Nebenwirkungen: zum Protokollieren, Synchronisieren mit localStorage, Aufrufen von APIs und Bearbeiten des DOM.

Effekte geben keinen Wert zurück.

Einen Effekt erstellen

Ein Effekt wird einmal sofort ausgeführt und danach jedes Mal erneut, wenn sich ein verfolgtes Signal ändert.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effekte benötigen einen Injection Context

Standardmäßig muss effect() in einem Injection Context erstellt werden – typischerweise im Konstruktor oder als Feldinitialisierer einer Komponente, Direktive oder eines Service.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Automatische Abhängigkeitsverfolgung

Wie computed verfolgen Effekte genau die Signale, die sie zur Laufzeit lesen. Bedingte Lesezugriffe werden nur verfolgt, wenn der entsprechende Zweig erreicht wird.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Signale mit localStorage synchronisieren

Ein klassischer Anwendungsfall für einen Effekt: Zustand bei jeder Änderung dauerhaft speichern.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effekte geben keine Werte zurück

Wenn Sie einen abgeleiteten Wert benötigen, verwenden Sie computed(). Effekte dienen Aktionen ohne Rückgabewert; ihr Ergebnis ist die Nebenwirkung selbst.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Signale innerhalb von Effekten setzen

Standardmäßig verhindert Angular das Schreiben in Signale innerhalb eines Effekts, um Schleifen zu vermeiden. Wenn Sie es wirklich benötigen, übergeben Sie { allowSignalWrites: true } – für Ableitungen sollten Sie jedoch computed bevorzugen.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Manuelles Aufräumen mit EffectRef

effect() gibt ein EffectRef zurück. Rufen Sie .destroy() auf, um den Effekt manuell zu beenden, bevor sein Besitzer zerstört wird.

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effekte werden automatisch aufgeräumt

Wenn ein Effekt in einer Komponente erstellt wird, wird er automatisch zerstört, sobald die Komponente zerstört wird. In der Regel müssen Sie .destroy() nicht selbst aufrufen.

Effekte werden nach dem Rendern ausgeführt

Effekte werden geplant und nach der Change Detection ausgeführt, gebündelt pro Microtask. Mehrere synchrone Änderungen an Signalen lösen den Effekt nur einmal aus.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Wann effect statt computed verwendet wird

computed: einen Wert aus Signalen ableiten (rein).
effect: auf Signale reagieren, indem etwas Externes ausgeführt wird (nicht rein).

Wenn Sie feststellen, dass Sie aus einem Effekt einen Wert zurückgeben, benötigen Sie wahrscheinlich ein computed.

Kurzer Test

Testen Sie Ihr Verständnis von Effekten.

Zusammenfassung: Effekte

effect() führt eine Funktion immer dann aus, wenn sich ihre verfolgten Signale ändern – ausschließlich für Nebenwirkungen.

  • Wird einmal sofort und danach bei jeder Änderung einer Abhängigkeit ausgeführt.
  • Benötigt einen Injection Context.
  • Wird zusammen mit seinem Besitzer automatisch zerstört und gibt für die manuelle Steuerung ein EffectRef zurück.
  • Verwenden Sie computed für Ableitungen und effect für Aktionen.

Als Nächstes: Ressourcen innerhalb von Effekten aufräumen.

Häufig gestellte Fragen

Ist die Lektion „Effects und Seiteneffekte“ kostenlos?

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

Reagieren Sie mit Effects auf Änderungen an Signals. 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 2 von 4.

Wie lange dauert die Lektion „Effects und Seiteneffekte“?

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

  1. Berechnete Signals
  2. Effects und Seiteneffekte
  3. Effect-Bereinigung und Lebenszyklus
  4. linkedSignal und fortgeschrittene Muster
← Zurück zu Angular Academy