Signaler i maler
Koble signalverdier direkte til komponentmaler.
Signaler i maler er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Signaler i maler
En av de beste egenskapene ved signaler er at du leser dem direkte i maler ved å kalle dem, akkurat som i TypeScript. Du trenger ikke en async pipe.
Lese i interpolasjon
I malen kaller du signalet inne i interpolasjonen med doble krøllparenteser for å vise verdien.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Ingen async pipe nødvendig
Med Observables trengte du async pipe for å abonnere og avslutte abonnementet. Signaler er synkrone, så du kaller dem ganske enkelt. Det finnes ikke noe abonnement du må avslutte.
Automatiske visningsoppdateringer
Når et signal som leses i malen, endres, vet Angular at malen er avhengig av signalet, og oppdaterer bare den aktuelle bindingen. Dette er finkornet reaktivitet i praksis.
Kalle signaler i hendelsesbehandlere
Knytt hendelser til komponentmetoder som oppdaterer signaler. Malen gjengir automatisk bindingene som er berørt, på nytt.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signaler i egenskapsbindinger
Du kan kalle et signal i alle typer bindinger, inkludert egenskaps- og attributtbindinger.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signaler med innebygd kontrollflyt
Moderne maler bruker innebygde kontrollflytblokker. Du leser et signal i en if-blokk ved å kalle det.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Beregnede signaler i maler
Avledede verdier egner seg godt i maler. Et beregnet signal beregnes på nytt bare når kildene endres, og leses på samme måte.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lese beregnede signaler i visningen
Les det beregnede signalet i malen på samme måte som alle andre signaler.
// template: <p>Total: {{ total() }}</p>Hvorfor dette er effektivt
Fordi Angular sporer nøyaktig hvilke maluttrykk som leser hvilke signaler, kan rammeverket hoppe over arbeid for deler av visningen som ikke var avhengige av signalet som ble endret.
Vanlig fallgruve: glemme parenteser
Hvis du skriver count i stedet for count() i en mal, viser du selve signalfunksjonen, ikke verdien. Kall alltid signalet.
Hurtigsjekk: Maler
Hvordan vises signaler i maler?
Oppsummering: Signaler i maler
Du leser signaler i maler ved å kalle dem med parenteser, uten async pipe og uten noe abonnement du må avslutte. Angular oppdaterer bare bindingene som er avhengige av et endret signal, og beregnede signaler fungerer på samme måte. Du har fullført grunnleggende signaler.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Signaler i maler» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Signaler i maler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Signaler i maler»?
Koble signalverdier direkte til komponentmaler. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Signaler i maler»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.