Växla med @switch
Välj mallar med @switch och @case.
Växla med @switch är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.
Växla med switch
Blocket at-switch väljer en gren bland flera utifrån ett värde, ungefär som en switch-sats. Det används tillsammans med at-case och at-default.
Grundläggande switch-syntax
Skriv at-switch med uttrycket inom parentes och därefter ett eller flera at-case-block, vart och ett med ett matchande värde.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }case-blocket
Varje at-case tar ett värde inom parentes. Det första case vars värde är strikt lika med switch-uttrycket renderas.
default-blocket
Blocket at-default renderas när inget case matchar. Det är valfritt men rekommenderas för fullständighetens skull.
Strikt likhet
Matchningen använder strikt likhet (===). Se till att case-värdena har samma typ som switch-uttrycket.
Växla utifrån en signal
Switch-uttrycket kan vara ett signalanrop, så vyn uppdateras när signalen ändras.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Ersätta ngSwitch
Detta ersätter den äldre kombinationen av direktiven ngSwitch, star-ngSwitchCase och star-ngSwitchDefault med renare syntax och utan import.
Endast en gren renderas
At-switch renderar exakt en matchande gren (eller standardgrenen). Övriga grenar finns inte alls i DOM:en.
Enum-värden och konstanter
Case-villkor kan jämföra med enum-medlemmar eller konstanter som exponeras på komponenten, vilket förbättrar läsbarheten och typsäkerheten.
Kapsla inuti switch
Varje case-block kan innehålla valfritt mallinnehåll, inklusive andra kontrollflödesblock som at-if och at-for.
När switch bör användas
Föredra at-switch framför en lång kedja med at-if och at-else if när Ni gör grenar utifrån ett enda värde med flera diskreta fall.
Snabbkontroll: switch
Reservgrenen i switch-blocket.
Sammanfattning: Växla
Ni har lärt Er at-switch-blocket med at-case-grenar som matchas med strikt likhet och en valfri reservgren med at-default. Det ersätter ngSwitch och renderar exakt en gren. Nästa steg: uppskjuten inläsning med at-defer.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 38
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Växla med @switch” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Växla med @switch”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Växla med @switch”?
Välj mallar med @switch och @case. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Angular Academy?
Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Växla med @switch”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Angular Academy-lektionen?
Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.