Introduktion av signaler: Angulars nya primitiv för reaktivitet

Den 15 februari 2023 introducerade Angulars team Signals till ramverket med en enkel pull-förfrågan. Sedan dess har det varit intensiva diskussioner i Angular-gemenskapen om dess användning och fördelar. Många har till och med börjat prototypa med signaler för att testa dess funktionalitet.

Låt oss ta en titt på hur den här nya funktionen fungerar, dess syntax och hur man använder den när den är helt utrullad.

Vad är signaler?

Signaltypen är Angulars nya reaktiva primitiva typ. Dess syfte är att hålla ett värde, precis som en standardvariabel, men det utmärkande för en signal är dess unika beteende. Om en signal ändras kommer den att meddela allt som beror på den.

Dessutom kan Angular använda signaler som det nya tillvägagångssättet för att upptäcka och utlösa förändringar, snarare än den nuvarande standardmetoden med smutsig kontroll av hela komponentträdet.

Hur man använder signaler i Angular

En signal kommer att se ut ungefär så här:

@Komponent({
 väljare: 'min-app',
 fristående: Sann,
 mall: `
 Antal: {{ count() }} </div>
 Dubbel: {{ double() }} </div>
"changeCount()"></button>
`,
})
exporteraklass AppComponent{
 räkna = signal(0)
 dubbel = beräknad(() =>detta.count() * 2);

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

I den här appkomponenten är variabelräkningen en signal som initierats med värdet noll. count refereras sedan inuti dubbel (ett beräknat värde) och mallen. Så när knappklickningen ställer in värdet för count till fem, kommer både det beräknade värdet (dubbelt) och värdena i mallen att uppdateras.

Varje del av Vinkelkomponent som beror på signalen kommer att uppdateras automatiskt när värdet ändras.

Varför införandet av signaler är viktigt

Signaler gör det lättare att lära sig och arbeta med Angular. Att byta till signaler som det nya standardsättet att lära och bygga med Angular kommer att harmonisera inlärningsprocessen. Oavsett om vi föredrar en mer imperativ kodningsstil med Angular, eller vill lära oss en mer deklarativ kodningsstil.

De flesta människor börjar koda imperativt eftersom det i allmänhet är mer intuitivt och bekant för människor. Men att byta från det imperativa förhållningssättet till det deklarativa sättet innebär ett paradigmskifte och en total förändring av vår mentala modell. Det är därför RX.js, det reaktiva biblioteket, är svårt att lära sig för många.

Signaler kommer att sammanföra dessa två separata tillvägagångssätt. Alla kan lära sig signaler som standard, börja lära sig begreppen bakom reaktivitet och inte ens oroa sig för att införliva Angulars RX.js om de inte kan eller vill.

När du väl är bekväm med grunderna i Angular och vill byta till en mer deklarativ kodningsstil kan du enkelt lägga till RX.js till de begrepp du redan förstår.

Signaler bör förbättra vinkelprogrammering för alla

Signals är Angulars nya reaktiva mekanism som du kan använda för att skapa reaktiva värden för konsumenterna att läsa. En signal meddelar omedelbart alla konsumenter när dess värde ändras. Signaler harmoniserar inlärningsprocessen för Angular genom att sammanföra de imperativa och deklarativa metoderna för kodning.

Angular kommer att förlita sig på signaler för att göra förändringsdetektering mer lätt och robust. Därför, som en Angular-utvecklare, kommer lära sig att använda signaler att ge dig ett fastare grepp om reaktivitet i Angular och göra dig till en bättre utvecklare. Glöm inte att behärska grunderna i Angular innan du lär dig de mer avancerade delarna.