Einführung von Signalen: Angulars neuer Primitive für Reaktivität

Am 15. Februar 2023 führte das Team von Angular Signals mit einem einfachen Pull-Request in das Framework ein. Seitdem gab es in der Angular-Community lebhafte Diskussionen über seine Verwendung und Vorteile. Viele haben sogar mit dem Prototyping mit Signalen begonnen, um ihre Funktionalität auszuprobieren.

Werfen wir einen Blick darauf, wie dieses neue Feature funktioniert, seine Syntax und wie es verwendet wird, sobald es vollständig eingeführt ist.

Was sind Signale?

Der Signaltyp ist der neue reaktive primitive Typ von Angular. Sein Zweck ist es, einen Wert zu halten, genau wie eine Standardvariable, aber das Unterscheidungsmerkmal eines Signals ist sein einzigartiges Verhalten. Wenn sich ein Signal ändert, benachrichtigt es alles, was davon abhängt.

Darüber hinaus kann Angular Signale als neuen Ansatz zum Erkennen und Auslösen von Änderungen verwenden, anstatt den aktuellen Standardansatz der Dirty-Prüfung des gesamten Komponentenbaums.

So verwenden Sie Signale in Angular

Ein Signal sieht in etwa so aus:

@Komponente({
 Wähler: 'meine App',
 eigenständige: WAHR,
 Vorlage: `
 Zählen: {{ zählen() }} </div>
 Doppelt: {{doppelt() }} </div>
"changeCount()"></button>
`,
})
ExportKlasse Anwendungskomponente{
 zählen = signal (0)
 doppelt = berechnet (() =>Das.zählen() * 2);

 changeCount() {
Das.count.set(5)
 }
}

In dieser App-Komponente ist die Variable count ein mit dem Wert Null initialisiertes Signal. count wird dann innerhalb von double (einem berechneten Wert) und der Vorlage referenziert. Wenn also der Schaltflächenklick den Wert von count auf fünf setzt, werden sowohl der berechnete Wert (double) als auch die Werte in der Vorlage aktualisiert.

Jeder Teil der Winkelkomponente die vom Signal abhängt, wird automatisch aktualisiert, sobald sich der Wert ändert.

Warum die Einführung von Signalen wichtig ist

Signale erleichtern das Erlernen und Arbeiten mit Angular. Der Wechsel zu Signalen als neue Standardmethode zum Lernen und Bauen mit Angular wird den Lernprozess harmonisieren. Egal, ob wir einen zwingenderen Codierungsstil mit Angular bevorzugen oder einen deklarativeren Codierungsstil lernen möchten.

Die meisten Menschen beginnen unbedingt mit dem Programmieren, weil es im Allgemeinen intuitiver und vertrauter ist. Aber der Wechsel vom imperativen zum deklarativen Ansatz beinhaltet einen Paradigmenwechsel und eine totale Veränderung unseres mentalen Modells. Aus diesem Grund ist RX.js, die reaktive Bibliothek, für viele schwer zu erlernen.

Signals bringt diese beiden getrennten Ansätze zusammen. Jeder kann Signale standardmäßig lernen, mit dem Erlernen der Konzepte hinter der Reaktivität beginnen und sich nicht einmal um die Integration kümmern RX.js von Angular wenn sie nicht können oder wollen.

Sobald Sie sich damit wohl fühlen Grundlagen von Angular und zu einem deklarativeren Codierungsstil wechseln möchten, können Sie RX.js einfach zu den Konzepten hinzufügen, die Sie bereits verstehen.

Signale sollten die Winkelprogrammierung für alle verbessern

Signals ist der neue reaktive Mechanismus von Angular, mit dem Sie reaktive Werte erstellen können, die Verbraucher lesen können. Ein Signal benachrichtigt sofort alle Verbraucher, sobald sich sein Wert ändert. Signals harmonisiert den Lernprozess von Angular, indem es die imperativen und deklarativen Codierungsansätze zusammenführt.

Angular wird sich auf Signale verlassen, um die Änderungserkennung leichter und robuster zu machen. Als Angular-Entwickler erhalten Sie daher durch das Erlernen der Verwendung von Signalen ein besseres Verständnis der Reaktivität in Angular und werden zu einem besseren Entwickler. Vergessen Sie nicht, die Grundlagen von Angular zu beherrschen, bevor Sie sich mit den fortgeschritteneren Teilen vertraut machen.