Warunkowe renderowanie za pomocą @if
Warunkowo wyświetlaj zawartość za pomocą @if i @else.
Warunkowe renderowanie za pomocą @if to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.
Wbudowany przepływ sterowania
Nowoczesne szablony Angulara zawierają bloki wbudowanego przepływu sterowania zapisywane za pomocą symbolu at. Zastępują one starsze dyrektywy strukturalne i nie wymagają żadnych importów.
Blok if
Blok at-if warunkowo renderuje zawartość. Należy zapisać symbol at, po którym występuje słowo if, warunek w nawiasach i zawartość w nawiasach klamrowych.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Zastępowanie ngIf
Ten zapis zastępuje starą dyrektywę strukturalną *ngIf. Nowa składnia jest częścią języka szablonów, więc nie trzeba niczego importować.
Odczytywanie sygnału w warunku
Warunkiem może być dowolne wyrażenie, w tym wywołanie sygnału.
// @if (count() > 0) {
// <p>You have items</p>
// }Blok else
Blok at-else udostępnia zawartość zastępczą, gdy warunek jest fałszywy. Następuje bezpośrednio po zamykającym nawiasie klamrowym bloku if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }Łańcuchy else if
Warunki można łączyć za pomocą at-else if, a następnie dodać końcowy at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Zapisywanie wyniku warunku
Blok at-if może przypisać wynik warunku do zmiennej lokalnej za pomocą słowa kluczowego as, co jest przydatne przy zawężaniu wartości niebędących null.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Dlaczego nowa składnia
Wbudowany przepływ sterowania jest czytelniejszy, sprawdzany pod kątem typów i wydajniejszy niż dyrektywy strukturalne. Eliminuje mikroskładnię i gwiazdkę używane przez stare dyrektywy.
Brak potrzeby elementu kontenera
W przeciwieństwie do starszych wzorców blok at-if nie wymaga elementu opakowującego ani ng-template. To nawiasy klamrowe wyznaczają granice zawartości warunkowej.
Zagnieżdżanie bloków
Bloki przepływu sterowania można dowolnie zagnieżdżać. Blok at-if może zawierać kolejny at-if, at-for i tak dalej.
Łączenie z bindowaniem
W bloku at-if można używać pełnego języka szablonów: interpolacja, bindowanie właściwości i bindowanie zdarzeń działają bez zmian.
Szybkie sprawdzenie: warunki
Nowa składnia warunkowa.
Podsumowanie: warunki
Poznali Państwo blok at-if do warunkowego renderowania, a także at-else i at-else if do obsługi alternatyw oraz słowo kluczowe as do przechwytywania wyniku. Zastępuje on star-ngIf i nie wymaga importu. Następnie poznają Państwo wykonywanie pętli za pomocą at-for.
Często zadawane pytania
Czy lekcja „Warunkowe renderowanie za pomocą @if” jest bezpłatna?
Tak — pełny tekst „Warunkowe renderowanie za pomocą @if” 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 „Warunkowe renderowanie za pomocą @if”?
Warunkowo wyświetlaj zawartość za pomocą @if i @else. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Warunkowe renderowanie za pomocą @if”?
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