Signal nei template
Colleghi direttamente i valori dei signal nei template dei componenti.
Signal nei template è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Signals nei template
Uno dei principali vantaggi dei signals è che può leggerli direttamente nei template chiamandoli, proprio come in TypeScript. Non è necessario alcun async pipe.
Lettura nell'interpolazione
Nel template, chiami il signal all'interno dell'interpolazione con doppie graffe per visualizzarne il valore.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Nessun async pipe necessario
Con gli Observable era necessario l'async pipe per sottoscriversi e annullare la sottoscrizione. I signals sono sincroni, quindi è sufficiente chiamarli. Non c'è nulla a cui annullare la sottoscrizione.
Aggiornamenti automatici della vista
Quando cambia un signal letto nel template, Angular sa che il template dipende da esso e aggiorna solo quel binding. Questa è la reattività granulare in azione.
Chiamare i signals nei gestori degli eventi
Colleghi gli eventi ai metodi del componente che aggiornano i signals. Il template esegue automaticamente il rendering aggiornato dei binding interessati.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals nei property binding
Può chiamare un signal all'interno di qualsiasi binding, inclusi i property binding e gli attribute binding.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals con il controllo di flusso integrato
I template moderni usano blocchi di controllo del flusso integrati. Per leggere un signal all'interno di un blocco if, è sufficiente chiamarlo.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Signals computed nei template
I valori derivati sono molto utili nei template. Un signal computed viene ricalcolato solo quando cambiano le sue sorgenti e si legge allo stesso modo.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lettura di un computed nella vista
Legga il signal computed nel template proprio come qualsiasi altro signal.
// template: <p>Total: {{ total() }}</p>Perché è efficiente
Poiché Angular tiene traccia esattamente delle espressioni del template che leggono ciascun signal, può evitare il lavoro relativo alle parti della vista che non dipendevano dal signal modificato.
Errore comune: dimenticare le parentesi
Se nel template scrive count invece di count(), visualizzerà la funzione signal stessa, non il suo valore. Chiami sempre il signal.
Controllo rapido: template
Come vengono visualizzati i signals nei template?
Riepilogo: signals nei template
Nei template legge i signals chiamandoli con le parentesi, senza async pipe e senza nulla a cui annullare la sottoscrizione. Angular aggiorna solo i binding che dipendono da un signal modificato e i signals computed funzionano allo stesso modo. Ha completato i fondamenti dei Signals.
Domande Frequenti
La lezione «Signal nei template» è gratuita?
Sì — il testo completo di «Signal nei template» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Signal nei template»?
Colleghi direttamente i valori dei signal nei template dei componenti. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Signal nei template»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Cosa sono i signal
- Creazione e lettura dei signal
- Aggiornamento dei signal con set e update
- Signal nei template