Angular - kontrolowanie widoku

Aleksander Patschek

Czas czytania: 3 min
Liczba słów: 497
Data: 13-07-2018
Udostępnij:

Manipulowanie widokiem to jedna z głównych funkcji wszystkich frameworków SPA. W zależności od warunków i stanu aplikacji musimy wyświetlić inną rzecz dla admina, inną dla moderatora a zupełnie inną gościowi, który dopiero co trafił na naszą stronę. W Angularze do warunkowania widoczności niektórych elementów służą dyrektywny strukturalne: *ngIf i *ngSwitch oraz atrybut hidden o których dziś chwilę powiem.

*NgIf

*NgIf jest prostą dyrektywą strukturalną, która w zależności od wartości umieszcza lub usuwa dany element w drzewie DOM. Wykorzystujemy go w następujący sposób:

<div *ngIf="warunek"></div>
<nazwaKomponentu *ngIf="warunek"></nazwaKomponentu>

Jak widać można go zastosować do każdego elementu HTML oraz stworzonego przez nas komponentu. Żeby sterować wyświetlaniem możemy podać zmienną typu Boolean lub wyrażenie, które w rezultacie da taka wartość

<div *ngIf="zmienna"></div>
<div *ngIf="zmienna === 'wartość'"></div>

Jest to bardzo przydatne, ponieważ dzięki temu jesteśmy w stanie ukryć przed użytkownikiem pewne elementy interfejsu, których nie powinien widzieć. Częściej jednak chcemy coś zamiast tego wyświetlić np.: jak użytkownik nie jest zalogowany to chcemy mu pokazać przyciski do logowania/rejestracji a jeśli już jest zalogowany to przycisk do edycji profilu. Możemy uzyskać taki efekt na dwa sposoby. Pierwszy to dwukrotne wykorzystanie dyrektywny *ngIf

<div *ngIf="zmienna">wartość dla admina</div>
<div *ngIf="!zmienna">wartość dla gościa</div>

Jednak takie coś nie jest zbyt estetyczne i może prowadzić do niepotrzebnych błędów przy późniejszej edycji kodu np.: zmiany nazwy zmiennej. Dużo lepiej wykorzystać konstrukcję if-else znaną z tradycyjnych języków programowania:

<div *ngIf="zmienna; else guest">wartość dla admina</div>
<ng-template #guest><div>wartość dla gościa</div></ng-template>

Taki kod jest już dużo bardziej poukładany i nawet przyszła edycja nie będzie problematyczna

Czym jest ta gwiazdka?

Jak zauważyliście przed dyrektywą NgIf umieszcza się gwiazdkę *. Jest to tylko tzw.: syntactic sugar, który na uprościć kod i ułatwić życie nam programistom. Nie jest ona wymagana i możemy ją pominąć ale wtedy musimy inaczej ułożyć nasze elementy oraz wykorzystać ng-template

<ng-template [ngIf]="visible"><div>Jestem widoczny</div></ng-template>

Hidden

Do ukrycia elementu możemy także wykorzystać atrybut [hidden] lub [style.display]="'none'". Trzeba tylko pamiętać, że wtedy element jest ukrywany ale ciągle istnieje w drzewie DOM. Jeśli jest to nasz komponent to ciągle może odbierać i wysyłać eventy. Element taki powstaje w momencie jak jest tworzone całe drzewa nawet jeśli jest on ukryty. W związku z tym, że nie jest on usuwany to nie jest wywoływana metoda ngOnDestroy podczas ukrywania. Jednak jest on szybszy od ngIf'a ponieważ nie musimy tworzyć na nowo elementu w drzewie DOM tylko go wyświetlić. Warto się zastanowić czego potrzebujemy przy projektowaniu interfejsu ponieważ w zależności od potrzeb jedna lub druga metoda może być tą właściwą.

Switch

Na sam koniec konstrukcja, którą w standardowych językach bardzo lubię i osobiście zachęcam do wykorzystania. Często jeżeli w systemie mamy różne role to chcemy wyświetlić różne informacje dla różnych ról. Możemy wykorzystać oczywiście dyrektywę ngIf:

<div *ngIf="zmienna == 'admin'">wartość dla admina</div>
<div *ngIf="zmienna == 'moderator'">wartość dla moderatora</div>

Nie jest to zbyt ładne i może powodować problemy przy rozszerzaniu o kolejne możliwości. Dużo bardziej polecam wykorzystanie z dyrektywy ngSwitch dzięki czemu nasz kod będzie wyglądał następująco:

<div [ngSwitch]="zmienna">
  <p *ngSwitchCase="'admin'" >wartość dla admina</p>
  <p *ngSwitchCase="'moderator'" >wartość dla moderatora</p>
  <p *ngSwitchDefault>wartość domyślna</p>
</div>

Właściwie nie trzeba tutaj nic dodatkowo pisać ponieważ struktura jest analogiczna jak to co znamy w programowaniu. Najpierw przy pomocy [ngSwitch] przekazujemy zmienną którą będziemy testować a następnie przy pomocy *ngSwitchCase i *ngSwitchDefault sterujemy co ma się wyświetlić dla danych wartości. Jest to bardzo elegackie rozwiązanie i pozwala na przyszłe rozbudowywanie opcji.

Wszystko co dziś pokazałem możecie sprawdzić tutaj. Dodatkowo zachecam do samodzielnego wypróbowania tych dyrektyw,ponieważ jest to najlepszy sposób na naukę

Jeśli podobał ci się ten artykuł to dołącz do newslettera. Dostaniesz dodatkowe treści do każdego postu oraz eksluzywne materiały, które pomogą ci pisac lepszy kod Chcę uzyskać dostęp do bonusów