Selección con @switch
Elija plantillas con @switch y @case.
Selección con @switch es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Cambiar de rama con switch
El bloque at-switch elige una rama entre varias según un valor, como una instrucción switch. Se combina con at-case y at-default.
Sintaxis básica de switch
Escriba at-switch con la expresión entre paréntesis y, después, uno o más bloques at-case, cada uno con un valor coincidente.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }El bloque case
Cada at-case recibe un valor entre paréntesis. Se renderiza el primer case cuyo valor es estrictamente igual a la expresión switch.
El bloque default
El bloque at-default se renderiza cuando ningún case coincide. Es opcional, pero se recomienda para completar todos los casos.
Igualdad estricta
La coincidencia utiliza igualdad estricta (===). Asegúrese de que los valores de case sean del mismo tipo que la expresión switch.
Usar un signal en switch
La expresión switch puede ser una llamada a un signal, por lo que la vista se actualiza cuando cambia el signal.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Sustituir ngSwitch
Esto sustituye la combinación antigua de las directivas ngSwitch, star-ngSwitchCase y star-ngSwitchDefault, con una sintaxis más clara y sin imports.
Solo se renderiza una rama
At-switch renderiza exactamente una rama coincidente (o la predeterminada). Las demás ramas ni siquiera están presentes en el DOM.
Enums y constantes
Los cases pueden compararse con miembros de enums o constantes expuestas en el componente, lo que mejora la legibilidad y la seguridad de tipos.
Anidar dentro de switch
Cada bloque case puede contener cualquier contenido de plantilla, incluidos otros bloques de control de flujo como at-if y at-for.
Cuándo usar switch
Prefiera at-switch a una cadena larga de at-if / at-else if cuando ramifique según un único valor con varios casos discretos.
Comprobación rápida: switch
La alternativa del bloque switch.
Resumen: cambiar de rama
Ha aprendido el bloque at-switch, con ramas at-case que coinciden mediante igualdad estricta y una alternativa at-default opcional. Sustituye a ngSwitch y renderiza exactamente una rama. Siguiente: carga diferida con at-defer.
Preguntas frecuentes
¿La lección «Selección con @switch» es gratis?
Sí — el texto completo de «Selección con @switch» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Selección con @switch»?
Elija plantillas con @switch y @case. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Selección con @switch»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Renderizado condicional con @if
- Bucles con @for
- Selección con @switch
- Carga diferida con @defer