Diese Reihe wirft einen kurzen Blick auf einige Highlights der Angular Versionen 16 und 17. Heute: “signals”.
Bereits in Version 16 enthalten und mit Version 17 als “stable” deklariert sind “signals” der neue reaktive Weg Daten in unseren Controllern zu verarbeiten. Neben diesem reaktiven Ansatz, der uns in vielen Fällen davon entbindet, mit zusätzlichen Observables zu arbeiten, wurde bei der Entwicklung auf die Optimierung der ChangeDetection abgezielt, die in Zukunft auf Basis von signals weiter optimiert wird.
Signals sind einfach ausgedrückt, ein generischer Wrapper der (ähnlich wie ein BehaviourSubject) einen initialen Wert entgegennimmt, auf dessen Änderung sich andere Programmteile registrieren können:
someId = signal(1);
material = signal({id: 5, name: 'some material'});
Der Abruf erfolgt dann als Methodenaufruf
<p>Id from signal: {{material().id}}</p>
(Allgemein wird von jeglichen Methodenaufrufen aus Gründen der Performance/ChangeDetection im Template abgeraten. Im Fall der Signals (genau wie bei gettern) wird ausdrücklich “Entwarnung” gegeben).
Aktualisierungen der signal-Werte erfolgt über spezielle Methoden. Dabei wird empfohlen, mit immutable objects zu arbeiten, um unerwünschte Seiteneffekte bei der Weiterverarbeitung der Daten zu verhindern. Zwei Methoden existieren:
- update: Wertezuweisung auf Basis des alten Wertes
- set: direkte Wertzuweisung
- mutate: in Angular 17 entfernt
this.material.update(current => {
const newMaterial = Object.assign({}, current);
newMaterial.id++;
return newMaterial;
})
//or
this.material.set({
id: 200,
name: 'some other'
});
Neben dem einfachen Lesen des Wertes lässt sich nun noch sehr einfach auf die Änderung der signal-Werte reagieren, ähnlich wie wir es mit einem zusätzlichen Observable/Subject realisieren würden.
- computed: erzeugt ein signal, welches immer dann aktualisiert wird, wenn sich ein enthaltendes signal ändert
- effect: listener der aufgerufen wird, immer dann, wenn sich ein enthaltendes signal ändert
materialLabel = computed(() => `${this.material().id}:${this.material().name}`);
constructor(myService: MyService) {
effect(() => {
console.log('Value has been changed...');
})
}
Sollten wir innerhalb unserer signals mit mutable objects arbeiten, ist etwas Vorsicht geboten. Im Standard erfolgt die Erkennung, ob sich der Wert eines signals geändert hat anhand von Objektgleichheit (===), “compute” und “effect” Abhängigkeiten werden also nicht aktualisiert, wenn wir z.B. Objekt-Attribute ändern. Bei der Deklaration des signals können wir jedoch zusätzlich einen equals-callback angeben, mit dessen Hilfe wir entscheiden können, ob ein Objekt sich geändert hat
material = signal({id: 5, name: 'some material'}, {equal: (a, b) => a.id === b.id});
Soweit so gut. Signals werden in Zukunft ein integraler Bestandteil unserer Angular-Anwendungen werden und die Möglichkeiten sind noch lange nicht ausgeschöpft. Besonders interessant: die Verwendung von signals als Alternative zu klassischem @Input-/@Output-Binding, die auf der Roadmap der Entwickler steht ( https://github.com/angular/angular/discussions/49682 ) Bleiben wir gespannt.
Wie immer. Live. In Farbe. bei Github
