Selezione con @switch
Scelga i template con @switch e @case.
Selezione con @switch è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Usare switch
Il blocco @switch sceglie un ramo tra diversi in base a un valore, come un'istruzione switch. Si abbina a @case e @default.
Sintassi di base di switch
Scriva @switch con l'espressione tra parentesi, quindi uno o più blocchi @case, ciascuno con un valore corrispondente.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Il blocco case
Ogni @case riceve un valore tra parentesi. Viene renderizzato il primo case il cui valore è strettamente uguale all'espressione switch.
Il blocco default
Il blocco @default viene renderizzato quando nessun case corrisponde. È facoltativo, ma consigliato per completezza.
Uguaglianza stretta
La corrispondenza usa l'uguaglianza stretta (===). Verifichi che i valori dei case abbiano lo stesso tipo dell'espressione switch.
Usare switch con un signal
L'espressione switch può essere una chiamata a un signal, quindi la vista si aggiorna quando il signal cambia.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Sostituire ngSwitch
Questo sostituisce la vecchia combinazione delle direttive ngSwitch, *ngSwitchCase e *ngSwitchDefault, con una sintassi più chiara e senza importazioni.
Viene renderizzato un solo ramo
@switch renderizza esattamente un ramo corrispondente (oppure quello predefinito). Gli altri rami non sono presenti nel DOM.
Enum e costanti
I case possono confrontarsi con membri di enum o costanti esposte dal componente, migliorando la leggibilità e la sicurezza dei tipi.
Nidificare all'interno di switch
Ogni blocco case può contenere qualsiasi contenuto di template, inclusi altri blocchi di flusso di controllo come @if e @for.
Quando usare switch
Preferisca @switch a una lunga catena @if / @else if quando deve diramare in base a un singolo valore con diversi casi distinti.
Verifica rapida: switch
Il fallback del blocco switch.
Riepilogo: switch
Ha imparato a usare il blocco @switch con rami @case confrontati tramite uguaglianza stretta e un fallback @default facoltativo. Sostituisce ngSwitch e renderizza esattamente un ramo. Prossimo argomento: caricamento differito con @defer.
Domande Frequenti
La lezione «Selezione con @switch» è gratuita?
Sì — il testo completo di «Selezione con @switch» è 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 «Selezione con @switch»?
Scelga i template con @switch e @case. 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 3 di 4.
Quanto tempo richiede la lezione «Selezione con @switch»?
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
- Rendering condizionale con @if
- Cicli con @for
- Selezione con @switch
- Caricamento differito con @defer