Sélection avec @switch
Choisissez des modèles avec @switch et @case.
Sélection avec @switch est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Sélection avec switch
Le bloc at-switch choisit une branche parmi plusieurs en fonction d'une valeur, comme une instruction switch. Il s'utilise avec at-case et at-default.
Syntaxe de base de switch
Écrivez at-switch avec l'expression entre parenthèses, puis un ou plusieurs blocs at-case, chacun associé à une valeur correspondante.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Le bloc case
Chaque at-case reçoit une valeur entre parenthèses. Le premier case dont la valeur est strictement égale à l'expression switch est affiché.
Le bloc default
Le bloc at-default s'affiche lorsqu'aucun case ne correspond. Il est facultatif, mais recommandé pour traiter tous les cas.
Égalité stricte
La comparaison utilise l'égalité stricte (===). Assurez-vous que les valeurs des case ont le même type que l'expression switch.
Effectuer une sélection sur un signal
L'expression switch peut être un appel de signal ; la vue se met donc à jour lorsque le signal change.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Remplacer ngSwitch
Il remplace l'ancienne combinaison des directives ngSwitch, *ngSwitchCase et *ngSwitchDefault, avec une syntaxe plus claire et sans import.
Une seule branche s'affiche
At-switch affiche exactement une branche correspondante (ou la branche par défaut). Les autres branches ne sont pas présentes dans le DOM.
Énumérations et constantes
Les case peuvent comparer des membres d'énumérations ou des constantes exposées par le composant, ce qui améliore la lisibilité et la sûreté des types.
Imbriquer dans switch
Chaque bloc case peut contenir n'importe quel contenu de modèle, notamment d'autres blocs de flux de contrôle comme at-if et at-for.
Quand utiliser switch
Préférez at-switch à une longue chaîne at-if / at-else if lorsque vous effectuez un branchement sur une seule valeur comportant plusieurs cas distincts.
Vérification rapide : switch
Le contenu de remplacement du bloc switch.
Récapitulatif : sélection
Vous avez appris le bloc at-switch, avec des branches at-case comparées par égalité stricte et un contenu de remplacement at-default facultatif. Il remplace ngSwitch et affiche exactement une branche. Ensuite : charger du contenu de manière différée avec at-defer.
Questions Fréquemment Posées
La leçon « Sélection avec @switch » est-elle gratuite ?
Oui — le texte complet de « Sélection avec @switch » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Sélection avec @switch » ?
Choisissez des modèles avec @switch et @case. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Sélection avec @switch » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rendu conditionnel avec @if
- Boucles avec @for
- Sélection avec @switch
- Chargement différé avec @defer