Wróć do strony głównej
Angular

Jak zbudować galerię Pokemonów za pomocą nowego przepływu sterowania w Angular 17

Wprowadzenie

W tym poście wytłumaczę jak zbudować prostą galerię Pokemonów, wykorzystując nowy przepływ sterowania (control flow) w Angular 17. Nowy przepływ sterowania jest nową cechą wersji 17 Angulara, która wprowadza nowe, zintegrowane bloki do warunkowego pokazywania i ukrywania elementów, a także renderowania listy elementów w szablonach HTML. Celem tych bloków jest zamiana obecnie stosowanych strukturalnych dyrektyw, i sprawienie, by pisanie kodu HTML było bardziej intuicyjne. Ponadto, bloki te są built-in; oznacza to, że developerzy Angulara nie muszą nic importować do komponentów samodzielnych (standalone).

Nowy przepływ sterowania Odpowiadające strukturalne dyrektywy Funkcja
@if, @else if oraz @else NgIf,  NgElse i NgTemplate Pokazania i ukrycie komponentu pod danym warunkiem
@for, @empty NgFor Iterowanie tablicy danych, z uwzględnieniem przypadku, w którym tablica jest pusta
@switch, @case oraz @default NgSwitch, NgSwitchCase i NgSwitchDefault Porównanie wartości z określonymi przypadkami i domyślny przypadek, jeśli żaden z warunków nie zostanie spełniony

Opis demo

W tym demo, galeria Pokemonów pokazuje 300 Pokemonów na przestrzeni 10 stron, czyli 30 Pokemonów na stronę. Widok listy wykorzystuje flexboxa, żeby rozstawić karty Pokemonów, a każda karta zawiera id, imię, wagę i wzrost Pokemona. Kiedy użytkownik kliknie na imię Pokemona, aplikacja przenosi go na stronę szczegółów Pokemona, aby wyświetlić konkretne atrybuty.  

Definiowanie ścieżek

Po pierwsze, zdefiniowałam ścieżki, aby móc nawigować do PokemonListComponent (lista pokemonów) i PokemonComponent (szczegóły pokemona)

Po drugie, przekazuję ścieżki do funkcji provideRouter z flagą withComponentInputBinding.

Wyświetlenie listy pokemonów w PokemonListComponent

Aplikacja ma wyświetlić listę pokemonów w przeglądarce, zatem stworzyłam PokemonListComponent.

pokemons to sygnał, który zawiera tablicę pokemonów.

W szablonie komponentu użyłam </span><b>@for, aby przeiterować listę pokemonów, i słowa klucz </span><b>track, które śledzi każdego pokemona po jego id. </span><b>@for ma istotną zaletę nad </span><b>ngFor, ponieważ parametr </span><b>track jest wymagany. </span><b>Track by może zwiększyć wydajność długiej listy, zawierającej wiele elementów.

Tak jak w przypadku </span><b>ngFor, w </span><b>@for możemy wykorzystać zmienne niejawne.

W powyższej pętli, przypisuję zmienną $index do idx, aby wyświetlić liczby wierszy. Inne dostępne niejawne zmienne to $count, $first, $even oraz $odd.

Wyświetlenie szczegółowych informacji Pokemona w PokemonComponent

Kiedy użytkownik kliknie w hiperłącze na karcie pokemona, Angular przekieruje go do PokemonComponent, aby wyświetlić właściciela, umiejętności, statystyki i fizyczne atrybuty danego pokemona.

pokemonDetails$ to Observabla pokemona, a </span><b>@if wydobywa z niej wartość, którą przypisuje do zmiennej pokemonDetails. Następnie pokemonDetails jest przekazana jako dana wejściowa kolejno dla komponentów PokemonPhysicalComponent, PokemonStatisticsComponent i PokemonAbilitiesComponent.

Wyświetlenie atrybutów fizycznych, statystyk i umiejętności Pokemonów

PokemonComponent składa się z PokemonPhysicalComponent, PokemonStatisticsComponent, i PokemonAbilitiesComponent. Zarówno PokemonStatisticsComponent, jak i PokemonAbilitiesComponent wykorzystują @for/@empty, aby wyświetlić kolejno listę statystyk i umiejętności.

Jeśli tablica statystyk nie jest pusta, blok @for iteruje ją, aby wyświetlić informacje każdego elementu. W innym przypadku, blok @empty wyświetla tekst “No Statistics”. track stat.name świadczy o tym, że elementy są śledzone po nazwie, ponieważ nazwa atrybutu jest unikalna dla każdego Pokemona.

W podobny sposób, block @for/@empty wyświetla specjalne umiejętności Pokemona. Pokemon nie zawiera zduplikowanych umiejętności, a zatem jest to unikalny klucz dla każdego wiersza umiejętności. Jeśli Pokemon nie ma żadnych umiejętności, blok @empty wyświetla tekst „No Ability”.

Na końcu użyłam </span><span style="font-weight: 400;">@switch, aby wyświetlić właściciela kilku ważniejszych Pokemonów. Pikachu, Stayyu, Steelix i Meowth są dosyć znane w serialu animowanym, a ich właściciele to albo protagoniści, albo antagoniści. Kiedy typ znanego pokemona wpada w jeden ze zdefiniowanych przypadków switch, customowy pipe ‘affiliation’ (przynależność) wyświetla jego właściciela. Jeśli typ pokemona jest nieznany, to jest ma wartość nieprzewidzianą przez żaden przypadek, przypadek „unknown” wyświetla tekst “Your team is unknown”. Przypadek @default nie powinien nigdy zostać rozpatrzony, ponieważ przypadek „unknown” obejmuje wszystkie typy pokemonów, które grają mniejsze role w serialu.

Jeśli wartość affiliation.type  to pikachu, meowth, staryu albo steelix, PokemonAffiliation zawęża typ pokemona do obiektu z odpowiednim właścicielem. Przekazuję affiliation.owner jako parametr customowego pipe’a, aby zrenderować jego imię. Jeśli typ pokemona jest nieznany, PokemonAffiliation zawęża typ do obiektu z właściwością warningMessage, której wartością jest tekst „Your team is unknown”. Możemy zastosować takie podejście, ponieważ @switch potrafi zawężać typy w szablonach HTML.

To wszystko! Stworzyłam prostą galerię pokemonów używając nowy przepływ sterowania, aby wyświetlić listę pokemonów. Nowy przepływ sterowania jest bardziej intuicyjny w użytku niż strukturalne dyrektywy. Ponadto, jego składnia jest prostsza w nauce i zapamiętaniu, niż jej obecne odpowiedniki. NgIf, ngSwitch i ngFor nie zostają całkowicie usunięte, jednak przewiduję, że nowy przepływ sterowania będzie od nich częściej widziany w szablonach HTML w Angularze 17 i jego następnych wersjach.

To koniec tego posta. Mam nadzieję, że spodobała się wam jego zawartość, i że dalej będziecie śledzić moje doświadczenie w nauce Angulara i innych technologiach.

Bibliografia:

O autorze

Connie Leung

Google Developer Expert – Angular. Software Architect w Diginex, bloger i twórca treści na youtube.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *