Introductie van signalen: Angular's nieuwe primitief voor reactiviteit

Op 15 februari 2023 introduceerde het team van Angular Signals in het framework met een eenvoudig pull-verzoek. Sindsdien zijn er felle discussies geweest in de Angular-gemeenschap over het gebruik en de voordelen ervan. Velen zijn zelfs begonnen met prototypen met signalen om de functionaliteit ervan uit te proberen.

Laten we eens kijken hoe deze nieuwe functie werkt, de syntaxis ervan en hoe deze te gebruiken zodra deze volledig is uitgerold.

Wat zijn signalen?

Het signaaltype is het nieuwe reactieve primitieve type van Angular. Het doel is om een ​​waarde vast te houden, net als een standaardvariabele, maar het onderscheidende kenmerk van een signaal is zijn unieke gedrag. Als een signaal verandert, meldt het alles wat ervan afhangt.

Bovendien kan Angular signalen gebruiken als de nieuwe benadering voor het detecteren en triggeren van verandering, in plaats van de huidige standaardbenadering van het vies controleren van de hele componentenboom.

Hoe signalen in hoekig te gebruiken

Een signaal ziet er ongeveer zo uit:

@Onderdeel({
 kiezer: 'mijn-app',
 op zichzelf staand: WAAR,
 sjabloon: `
 Tel: {{ count() }} </div>
 Dubbel: {{ dubbel() }} </div>
"ChangeCount()"></button>
`,
})
exporterenklas AppComponent{
 tellen = signaal(0)
 dubbel = berekend(() =>dit.graaf() * 2);

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

In deze app-component is de variabele count een signaal dat is geïnitialiseerd met de waarde nul. count wordt dan verwezen in double (een berekende waarde) en de sjabloon. Dus wanneer de klik op de knop de waarde van count instelt op vijf, worden zowel de berekende waarde (dubbel) als de waarden in de sjabloon bijgewerkt.

Elk onderdeel van de Hoekige component dat afhankelijk is van het signaal, wordt automatisch bijgewerkt zodra de waarde verandert.

Waarom de introductie van signalen belangrijk is

Signalen maken het leren en werken met Angular gemakkelijker. Overschakelen naar signalen als de nieuwe standaardmanier om te leren en te bouwen met Angular zal het leerproces harmoniseren. Of we nu de voorkeur geven aan een meer imperatieve stijl van coderen met Angular, of een meer declaratieve stijl van coderen willen leren.

De meeste mensen beginnen dwingend met coderen omdat het over het algemeen intuïtiever en vertrouwder is voor mensen. Maar overschakelen van de imperatieve benadering naar de declaratieve manier houdt een paradigmaverschuiving in en een totale verandering in ons mentale model. Dit is de reden waarom RX.js, de reactieve bibliotheek, voor velen moeilijk te leren is.

Signalen brengt deze twee afzonderlijke benaderingen samen. Iedereen kan standaard signalen leren, de concepten achter reactiviteit leren en zich niet eens zorgen maken over het incorporeren ervan RX.js van Angular als ze dat niet kunnen of willen.

Als je eenmaal vertrouwd bent met de basisprincipes van Angular en wilt overschakelen naar een meer declaratieve codeerstijl, kunt u eenvoudig RX.js toevoegen aan de concepten die u al begrijpt.

Signalen zouden hoekprogrammering voor iedereen moeten verbeteren

Signalen is het nieuwe reactieve mechanisme van Angular dat u kunt gebruiken om reactieve waarden te creëren die consumenten kunnen lezen. Een signaal waarschuwt onmiddellijk alle consumenten zodra de waarde verandert. Signalen harmoniseren het leerproces van Angular door de imperatieve en declaratieve benaderingen van coderen samen te brengen.

Angular vertrouwt op signalen om wijzigingsdetectie lichter en robuuster te maken. Daarom zal het leren gebruiken van signalen je als Angular-ontwikkelaar een beter begrip geven van de reactiviteit in Angular en je een betere ontwikkelaar maken. Vergeet niet de basis van Angular onder de knie te krijgen voordat u de meer geavanceerde onderdelen leert.