0Pricing
Angular Academy · Lektion

linkedSignal und fortgeschrittene Muster

Koordinieren Sie abhängige Signals reaktiv.

linkedSignal und fortgeschrittene Muster ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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, das linkedSignal löst

Manchmal benötigen Sie einen schreibbaren Zustand, der sich außerdem zurücksetzt, wenn sich eine Quelle ändert. Ein einfaches computed ist schreibgeschützt; ein einfaches Signal setzt sich nicht automatisch zurück. linkedSignal() schließt diese Lücke: schreibbarer, aus einer Quelle abgeleiteter Zustand.

Grundlagen von linkedSignal

Übergeben Sie eine Berechnung. Das Ergebnis ist ein schreibbares Signal, das bei Änderungen seiner Quelle neu berechnet wird, sich aber auch manuell setzen lässt.

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

const options = signal(['a', 'b', 'c']);
const selected = linkedSignal(() => options()[0]);

selected.set('b');        // manual override
options.set(['x', 'y']);  // resets to 'x'

Warum nicht einfach ein Signal?

Ein einfaches, einmalig initialisiertes Signal würde nach einer Änderung der Quelle einen veralteten Wert behalten. linkedSignal leitet den Wert bei jeder Änderung der Quelle erneut ab und erlaubt dazwischen weiterhin Schreibzugriffe.

// Plain signal: stale after options change
// const selected = signal(options()[0]);

// linkedSignal: auto-resets when options changes
const selected = linkedSignal(() => options()[0]);

Die Form mit source und computation

Die erweiterte Form trennt source von computation und gewährt Zugriff auf den vorherigen Wert – nützlich, um eine Auswahl beizubehalten, sofern sie noch vorhanden ist.

const items = signal([{ id: 1 }, { id: 2 }]);

const chosen = linkedSignal({
  source: items,
  computation: (newItems, previous) => {
    const prev = previous?.value;
    const stillThere = newItems.find(i => i.id === prev?.id);
    return stillThere ?? newItems[0];
  }
});

Die Auswahl des Benutzers beibehalten

Das Muster mit dem vorherigen Wert behält die Auswahl des Benutzers bei, wenn sie nach der Aktualisierung der Liste noch vorhanden ist. Andernfalls wird auf einen Standardwert zurückgegriffen – eine gute Verbesserung der UX.

linkedSignal ist schreibbar

Anders als bei computed können Sie für ein linkedSignal .set() und .update() aufrufen. Der manuell gesetzte Wert bleibt erhalten, bis sich die Quelle erneut ändert.

const base = signal(10);
const editable = linkedSignal(() => base());

editable.update(v => v + 5); // 15
base.set(100);               // resets to 100

Muster: abhängige Dropdowns

Land -> Stadt: Wenn sich das Land ändert, setzen Sie die Stadt auf die erste verfügbare zurück, erlauben Sie dem Benutzer aber, eine andere auszuwählen.

const country = signal('TR');
const cities = computed(() => citiesFor(country()));
const city = linkedSignal(() => cities()[0]);

country.set('US'); // city resets to first US city

Muster: Optimistischer UI-Zustand

linkedSignal kann einen optimistischen, aus Serverdaten abgeleiteten Wert enthalten, während die UI ihn sofort überschreiben und bei Eingang aktueller Daten erneut synchronisieren kann.

Mit Effekten kombinieren

Sie können mit einem Effekt auf Änderungen eines linkedSignal reagieren, etwa um die aktuelle Auswahl zu speichern.

const selected = linkedSignal(() => options()[0]);

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

Wann linkedSignal NICHT verwendet werden sollte

Wenn der abgeleitete Wert ausschließlich schreibgeschützt ist, verwenden Sie computed(). Wenn der Wert nie aus einer Quelle zurückgesetzt werden muss, verwenden Sie ein einfaches signal(). Verwenden Sie linkedSignal nur, wenn Sie beides benötigen: einen schreibbaren und aus der Quelle zurücksetzbaren Wert.

Fortgeschrittener reaktiver Graph

signal -> computed -> linkedSignal -> effect bildet eine vollständige reaktive Pipeline: rohe Eingaben, reine Ableitungen, schreibbarer und zurücksetzbarer Zustand sowie Nebenwirkungen – und das alles ohne manuelle Subscriptions.

Kurzer Test

Testen Sie Ihr Verständnis von linkedSignal.

Zusammenfassung: linkedSignal und fortgeschrittene Muster

linkedSignal() stellt Ihnen beschreibbaren Zustand bereit, der aus einer Quelle zurückgesetzt wird.

  • Verwenden Sie die Quellen-/Berechnungsform, um eine Benutzerauswahl beizubehalten.
  • Ideal für voneinander abhängige Dropdowns und optimistische Benutzeroberflächen.
  • Verwenden Sie computed für schreibgeschützte Werte und ein einfaches Signal für Zustand, der nicht zurückgesetzt wird.

Sie haben den Signals-Kurs abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „linkedSignal und fortgeschrittene Muster“ kostenlos?

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

Koordinieren Sie abhängige Signals reaktiv. 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 4 von 4.

Wie lange dauert die Lektion „linkedSignal und fortgeschrittene Muster“?

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