Angular Academy · Lektion

Zustand mit computed ableiten

Lesemodelle aus dem Basiszustand erstellen

Zustand mit computed ableiten 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.

Abgeleiteter Zustand

Oft wird der Zustand aus anderem Zustand berechnet: etwa eine Summe aus Elementen, eine gefilterte Liste oder ein Gültigkeitsstatus. Angulars computed() erstellt ein schreibgeschütztes Signal, dessen Wert aus anderen Signalen abgeleitet wird.

Ein computed erstellen

Übergeben Sie computed() eine Funktion. Sie liest andere Signale und gibt einen Wert zurück. Das Ergebnis wird nur dann neu berechnet, wenn sich eine seiner Abhängigkeiten ändert.

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

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Automatische Abhängigkeitsverfolgung

Sie müssen keine Abhängigkeiten deklarieren. Alle Signale, die Sie innerhalb der Funktion lesen, werden automatisch zu Abhängigkeiten. Wenn Sie qty ändern, wird total neu berechnet; ein nicht verwandtes Signal löst dagegen keine Neuberechnung aus.

Memoisierung

computed() speichert sein Ergebnis zwischen. Wenn Sie es mehrfach lesen, wird die Funktion bis zur Änderung einer Abhängigkeit nur einmal ausgeführt. Dadurch bleiben abgeleitete Lesemodelle auch bei vielen Bindungen in Templates kostengünstig.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed in einem Store

Geben Sie innerhalb eines Signal-Stores berechnete Lesemodelle frei, damit Komponenten fertige, darstellungsbereite Werte verwenden, statt sie in Templates erneut zu berechnen.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

computed verketten

Berechnete Signale können andere berechnete Signale lesen. Erstellen Sie hierarchische Lesemodelle: Eine grundlegende Ableitung dient als Grundlage für eine übergeordnete.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtern und Suchen

Ein häufiges Lesemodell besteht darin, eine Liste anhand eines Suchsignals zu filtern. Das gefilterte Ergebnis wird aktualisiert, sobald sich die Liste oder die Abfrage ändert.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Keine Seiteneffekte

Eine computed()-Funktion muss rein sein: Sie liest ausschließlich Signale und gibt einen Wert zurück. Ändern Sie darin keinen Zustand, rufen Sie keine APIs auf und schreiben Sie nicht in andere Signale. Verwenden Sie für Seiteneffekte stattdessen effect().

Gleichheit und übersprungene Aktualisierungen

Standardmäßig verwendet computed Referenzgleichheit (Object.is), um festzustellen, ob sich der Wert geändert hat. Wenn der neue Wert dem alten entspricht, werden Verbraucher nicht benachrichtigt, wodurch unnötige Arbeit vermieden wird.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

computed in Templates verwenden

Lesen Sie berechnete Signale in Templates wie jedes andere Signal. Angular aktualisiert nur die Bindungen, deren berechneter Wert sich tatsächlich geändert hat.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed im Vergleich zu Methoden

Verwenden Sie computed() für aus dem Zustand abgeleitete Werte, die automatisch aktualisiert und memoisiert werden sollen. Verwenden Sie eine gewöhnliche Methode für einmalige Berechnungen, die Argumente annehmen oder bei Bedarf ausgeführt werden sollen.

Kurze Überprüfung

Überprüfen Sie Ihr Verständnis berechneter Signale.

Zusammenfassung

Sie haben mit computed() einen abgeleiteten Zustand erstellt: mit automatischer Abhängigkeitsverfolgung, memoisierten reinen Funktionen, verkettbaren Lesemodellen und übersprungenen Aktualisierungen durch Gleichheitsvergleiche. Geben Sie berechnete Lesemodelle aus Stores frei, damit Templates deklarativ bleiben.

Häufig gestellte Fragen

Ist die Lektion „Zustand mit computed ableiten“ kostenlos?

Ja — der vollständige Text von „Zustand mit computed ableiten“ 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 „Zustand mit computed ableiten“?

Lesemodelle aus dem Basiszustand erstellen 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 „Zustand mit computed ableiten“?

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