Winkelgebundenes Signal

In Angular 19 führt die Funktion „linkedSignal“ eine reaktive Variable ein, die mit der berechneten Logik synchronisiert bleibt. Dies ist eine leistungsstarke Ergänzung, die die Reaktivität verbessert und Ihre Codebasis vereinfacht.

So funktioniert LinkedInSignal

LinkedSignal funktioniert, indem es seinen Wert von einer bereitgestellten Berechnungsfunktion ableitet. So funktioniert es:

1. Berechnungsfunktion: Sie geben eine Funktion an linkedSignal an, und das Ergebnis wird zum Wert des linkedSignals.
2. Automatische Aktualisierungen: Das verknüpfte Signal wird automatisch aktualisiert, wenn sich die Eingaben für die Berechnung ändern.
3. Manuelle Aktualisierungen: Sie können den Wert eines verknüpften Signals auch manuell ändern.

---

Beispielverwendung

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);

Schritt für Schritt:

1. Anfangswert:

console.log(selectedOption()); // 'Ground'

selectedOption beginnt mit „Ground“, da es auf den ersten Artikel in „shippingOptions“ verweist.

1. Manuelles Update:

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

Sie haben selectedOption manuell auf „Sea“ gesetzt, was die dritte Option im Array ist.

1. Automatische Aktualisierung bei Abhängigkeitsänderung:

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

Wenn sich die Versandoptionen ändern, wird das verknüpfte Signal neu berechnet. Jetzt wird die neue erste Option angezeigt: „E-Mail“.

Hier ist ein Beispiel für die Verwendung eines LinkedInSignals mit einer benutzerdefinierten Berechnungsfunktion
≈
Angenommen, Sie möchten die Temperatur sowohl in Celsius als auch in Fahrenheit verwalten. Ein LinkedIn-Signal kann verwendet werden, um Fahrenheit über eine benutzerdefinierte Funktion mit Celsius zu verknüpfen.

const celsius = signal(25); // Base signal for temperature in Celsius
const fahrenheit = linkedSignal(() => celsius() * 9/5 + 32); // Compute Fahrenheit from Celsius
console.log(fahrenheit()); // 77 (25°C in Fahrenheit)
// Change the Celsius value
celsius.set(30);
console.log(fahrenheit()); // 86 (30°C in Fahrenheit)
// Manually update Fahrenheit (breaks auto-link temporarily)
fahrenheit.set(100);
console.log(fahrenheit()); // 100
console.log(celsius()); // Still 30, as Fahrenheit is overridden
// Change Celsius again to reset linkage
celsius.set(0);
console.log(fahrenheit()); // 32 (0°C in Fahrenheit)

Warum es verwenden?

Hält den Status synchron: Stellt sicher, dass Ihr verknüpftes Signal immer mit dem neuesten Stand seiner Berechnung übereinstimmt.
Praktisch: Sie müssen das verknüpfte Signal nicht manuell aktualisieren, wenn sich seine Abhängigkeiten ändern – es wird automatisch aktualisiert.
Flexibel: Sie können den Wert bei Bedarf immer noch manuell überschreiben.

Das Wichtigste zum Mitnehmen:

Ein LinkedIn-Signal verknüpft seinen Wert mit einer Logik, sodass es automatisch auf dem neuesten Stand bleibt, wenn sich die Logik ändert. Es eignet sich hervorragend für Szenarien, in denen ein Staat von einem anderen abhängig ist.

Das obige ist der detaillierte Inhalt vonWinkelgebundenes Signal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!