0Pricing
Angular Academy · Lektion

Berechnete Signals

Leiten Sie Werte ab, die automatisch aktualisiert werden.

Berechnete Signals ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 berechnetes Signal

Ein computed()-Signal leitet einen Wert aus einem oder mehreren anderen Signalen ab. Sobald sich ein Quellsignal ändert, wird der berechnete Wert verzögert neu berechnet – und zwar erst, wenn etwas ihn liest.

Berechnete Signale sind schreibgeschützt: Sie können .set() nicht für sie aufrufen.

Ein computed erstellen

Sie übergeben computed() eine Funktion. Angular verfolgt automatisch jedes Signal, das Sie darin lesen.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Automatische Abhängigkeitsverfolgung

Sie müssen Abhängigkeiten nie manuell deklarieren. Wenn Sie innerhalb des Callbacks price() und quantity() lesen, werden sie automatisch als Abhängigkeiten registriert.

Wird ein Signal bedingt gelesen und der entsprechende Zweig nicht erreicht, wird es bei diesem Durchlauf nicht verfolgt.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Verzögerte Auswertung und Memoization

Ein computed wird erst beim Lesen ausgeführt und speichert sein Ergebnis zwischen. Wenn Sie es zweimal lesen, ohne dass sich die Quellen geändert haben, wird die Funktion nur einmal ausgeführt.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Computed-Signale verketten

Berechnete Signale können von anderen berechneten Signalen abhängen und so einen reaktiven Graphen bilden.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

computed in einer Komponente verwenden

Berechnete Signale spielen ihre Stärken in Komponenten aus. Das Template wird nur dann neu gerendert, wenn sich der berechnete Wert tatsächlich ändert.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Computed-Signale sind schreibgeschützt

Der Versuch, ein berechnetes Signal zu setzen, führt zu einem Fehler zur Compile-Zeit. Sie dienen ausschließlich dazu, abgeleiteten Zustand auszudrücken.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Gleichheit und übersprungene Neuberechnungen

Standardmäßig verwendet ein computed Object.is zum Vergleichen. Entspricht der neue berechnete Wert dem alten, werden abhängige Elemente nicht benachrichtigt, wodurch unnötige Arbeit vermieden wird.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Benutzerdefinierte Gleichheitsfunktion

Sie können eine Option equal übergeben, um festzulegen, wann ein computed als geändert gilt – nützlich bei Objekten oder Arrays.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Nebenwirkungen in computed vermeiden

Ein computed muss rein sein: keine HTTP-Aufrufe, keine Protokollierung als Teil des Verhaltens und keine Änderungen an anderen Signalen. Nebenwirkungen gehören in effect(). Ein reines computed macht den reaktiven Graphen vorhersehbar.

Computed im Vergleich zu Methoden

Eine Template-Methode wird bei jedem Change-Detection-Zyklus ausgeführt. Ein computed wird nur ausgeführt, wenn sich seine Abhängigkeiten ändern, und speichert das Ergebnis zwischen – für abgeleitete Werte ist das deutlich effizienter.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Kurzer Test

Testen Sie Ihr Verständnis berechneter Signale.

Zusammenfassung: berechnete Signale

Sie haben gelernt, dass computed() schreibgeschützte abgeleitete Signale mit automatischer Abhängigkeitsverfolgung, verzögerter Auswertung und Memoization erstellt.

  • Halten Sie sie rein – ohne Nebenwirkungen.
  • Sie können von anderen berechneten Signalen abhängen.
  • Verwenden Sie equal für eine benutzerdefinierte Änderungsprüfung.

Als Nächstes: Nebenwirkungen mit effect() ausführen.

Häufig gestellte Fragen

Ist die Lektion „Berechnete Signals“ kostenlos?

Ja — der vollständige Text von „Berechnete Signals“ 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 „Berechnete Signals“?

Leiten Sie Werte ab, die automatisch aktualisiert werden. 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 1 von 4.

Wie lange dauert die Lektion „Berechnete Signals“?

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