Skift med @switch
Vælg templates med @switch og @case.
Skift med @switch er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Skift med switch
at-switch-blokken vælger én gren blandt flere ud fra en værdi, ligesom en switch-sætning. Den bruges sammen med at-case og at-default.
Grundlæggende switch-syntaks
Skriv at-switch med udtrykket i parentes og derefter en eller flere at-case-blokke, hver med en matchende værdi.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }case-blokken
Hver at-case tager en værdi i parentes. Den første case, hvis værdi er strengt lig med switch-udtrykket, gengives.
default-blokken
at-default-blokken gengives, når ingen case matcher. Den er valgfri, men anbefales for fuldstændighedens skyld.
Streng lighed
Matchning bruger streng lighed (===). Sørg for, at case-værdierne har samme type som switch-udtrykket.
Skift ud fra et signal
Switch-udtrykket kan være et signal-kald, så visningen opdateres, når signalet ændres.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Erstatning for ngSwitch
Dette erstatter den ældre kombination af directivesene ngSwitch, star-ngSwitchCase og star-ngSwitchDefault med en renere syntaks og ingen import.
Kun én gren gengives
At-switch gengiver præcis én matchende gren (eller standardgrenen). De øvrige grene findes slet ikke i DOM'en.
Enums og konstanter
Cases kan sammenligne med enum-medlemmer eller konstanter, der eksponeres på komponenten, hvilket forbedrer læsbarheden og typesikkerheden.
Indlejring i switch
Hver case-blok kan indeholde vilkårligt skabelonindhold, herunder andre kontrolflow-blokke som at-if og at-for.
Hvornår skal switch bruges
Foretræk at-switch frem for en lang kæde af at-if og at-else if, når du forgrener ud fra én værdi med flere adskilte cases.
Hurtigt tjek: switch
Reservegrenen i switch-blokken.
Opsummering: Skift
Du har lært at-switch-blokken med at-case-grene, der matches med streng lighed, samt en valgfri at-default-reservegren. Den erstatter ngSwitch og gengiver præcis én gren. Næste trin: udskudt indlæsning med at-defer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Skift med @switch” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Skift med @switch”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Skift med @switch”?
Vælg templates med @switch og @case. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Skift med @switch”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.