Przełączanie za pomocą @switch
Wybieraj szablony za pomocą @switch i @case.
Przełączanie za pomocą @switch to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Przełączanie za pomocą switch
Blok at-switch wybiera jedną z kilku gałęzi na podstawie wartości, podobnie jak instrukcja switch. Współpracuje z at-case i at-default.
Podstawowa składnia switch
Należy zapisać at-switch z wyrażeniem w nawiasach, a następnie jeden lub więcej bloków at-case, z których każdy zawiera pasującą wartość.
// @switch (status) {
// @case ('loading') { <p>Loading...</p> }
// @case ('error') { <p>Error!</p> }
// @default { <p>Ready</p> }
// }Blok case
Każdy blok at-case przyjmuje wartość w nawiasach. Renderowany jest pierwszy przypadek, którego wartość jest ściśle równa wyrażeniu switch.
Blok default
Blok at-default renderuje zawartość, gdy żaden przypadek nie pasuje. Jest opcjonalny, ale zaleca się jego użycie dla kompletności.
Ścisła równość
Dopasowanie używa ścisłej równości (===). Należy upewnić się, że wartości case mają ten sam typ co wyrażenie switch.
Przełączanie na podstawie sygnału
Wyrażeniem switch może być wywołanie sygnału, dzięki czemu widok aktualizuje się wraz ze zmianami sygnału.
// @switch (state()) {
// @case ('on') { <p>On</p> }
// @case ('off') { <p>Off</p> }
// }Zastępowanie ngSwitch
Ten zapis zastępuje starsze połączenie dyrektyw ngSwitch, star-ngSwitchCase i star-ngSwitchDefault, oferując czytelniejszą składnię bez importu.
Renderowana jest tylko jedna gałąź
At-switch renderuje dokładnie jedną pasującą gałąź (lub gałąź domyślną). Pozostałe gałęzie w ogóle nie występują w DOM.
Enumy i stałe
Przypadki mogą porównywać wartości z elementami enumów lub stałymi udostępnionymi przez komponent, co poprawia czytelność i bezpieczeństwo typów.
Zagnieżdżanie wewnątrz switch
Każdy blok case może zawierać dowolną zawartość szablonu, w tym inne bloki przepływu sterowania, takie jak at-if i at-for.
Kiedy używać switch
Blok at-switch warto wybrać zamiast długiego łańcucha at-if / at-else if, gdy rozgałęzienie zależy od jednej wartości mającej kilka określonych przypadków.
Szybkie sprawdzenie: switch
Wartość zastępcza bloku switch.
Podsumowanie: przełączanie
Poznali Państwo blok at-switch z gałęziami at-case dopasowywanymi za pomocą ścisłej równości oraz opcjonalną gałęzią zastępczą at-default. Zastępuje on ngSwitch i renderuje dokładnie jedną gałąź. Następnie poznają Państwo odroczone ładowanie za pomocą at-defer.
Często zadawane pytania
Czy lekcja „Przełączanie za pomocą @switch” jest bezpłatna?
Tak — pełny tekst „Przełączanie za pomocą @switch” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przełączanie za pomocą @switch”?
Wybieraj szablony za pomocą @switch i @case. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Przełączanie za pomocą @switch”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Warunkowe renderowanie za pomocą @if
- Pętle za pomocą @for
- Przełączanie za pomocą @switch
- Odroczone ładowanie za pomocą @defer