ANGULAR – Tips & Tricks cz. III

Witam w kolejnym artykule z serii Tips & Tricks! Wg statystyk Google Analitycs, cieszy się największą ilością wyświetleń, więc postaram się częściej dodawać arty z tej z serii. Zatem do meritum!:)

1. Wstrzymanie EventEmmitera

Zapewne jak wiesz, komponent dziecko może się komunikować z komponentem rodzicem poprzez dekorator @Output. Zdarzają się sytuacje, że chcemy wstrzymać możliwość wysyłania eventów. Jeden sposób, to odbiór parametru EventEmittera i dodanie odpowiedniego IFa, na który powiedzmy funkcja nasłuchiwująca ma się od razu zakończyć. Jednak w ten sposób nadal wysyłamy eventy wysyłane poprzez emit().

Aby faktycznie wstrzymać wysyłanie eventów, musimy skorzystać z metody .complete() z biblioteki RxJS.

Poniżej plunker z przykładem, musisz otworzyć konsolę aby zobaczyć efekt:

STOP EVENTEMITTER

2. Event keyup

Angular udostępnia nam łatwe obsługiwanie eventów, np za pomocą metody (click). Bardzo możliwe, że korzystałeś już z (keyup), np. w formularzach:

Często w aplikacjach jest tak, że np pole automatycznie zatwierdza się po kliknięciu guzika enter, lub kliknięcie strzałkę w górę, wraca do ostatnio wpisanego tekstu. Zamiast dopisywać swój własny kod, na obsługę np. entera, możemy skorzystać ze sprecyzowanej metody keyup w jednej z poniższych postaci:

Znaczenie enter / arrowUp / arrowDown / esc, zakładam, że jest jasne:-).

3. valueChanges w ReactiveForms i unscubscription

Używając ReactiveForms, możemy nasłuchiwać na zmianę wartości konkretnej kontrolki w formularzu w następujący sposób:

Trzeba pamiętać, że w tym przypadku, Angular nie odepnie subskrypcji za nas np. w przypadku opuszczenia widoku (komponentu), tak jak to robi automatycznie w większości przypadków.

Poprawne rozwiązanie:

Zatem przypisujemy valueChanges.subscribe do pola klasy, a następnie w hooku ngOnDestroy, odpinamy się od subskrypcji.

4. Zmiana tytułu za pomocą klasy Title

Standardowo aplikacje SPA, posiadają ten sam tytuł na każdym widoku. No ale być może chcemy z jakiegoś powodu poprawić SEO naszej aplikacji? Angular udostępnia nam serwis Title. Jeśli chcemy aby widok z danym komponentem miał swój tytuł (tytuł widzimy zawsze u góry, w karcie przeglądarki), możemy to zrobić w następujący sposób:

1. Importujemy klasę Title z platform-browser, następnie dodajemy ją do providers w app.module.ts:

2 . Przechodzimy do komponentu, wstrzykujemy serwis Title:

3. Klasa Title ma dwie metody,  getTitle() oraz setTitle(string). Wykorzystamy setTitle do ustawienia tytułu:

W tym momencie, w karcie ustawi się nasz nowy tytuł, gdy odwiedzimy nasz konkretny komponent.

5. Then i Else

Chyba już wszyscy się dowiedzieli, że Angular4 udostępnia nam „else” w *ngIf. Ale być może nie wiesz, że możesz skorzystać z „then”:

6. Pipes nie tylko na widoku

Angular udostępnia nam Pipes, które najczęściej odpowiednio formatują nam wartości na widoku, np:

Dobrze wiedzieć, że dany Pipe możemy wstrzyknąć jako serwis do klasy komponentu. Najpierw musimy go zarejestrować w providers w app.module.ts (i oczywiście zaimportować):

Następnie w komponencie wstrzykujemy wybrany Pipe:

Wystarczy wywołać metodę transform, vuala:-)

7. Nasłuchiwanie na window events

Obiekt window może nasłuchiwać na takie eventy jak scroll, lub np. resize. W jQuery bardzo wygodnie się to robi:

Co ciekawe, w Angularze możemy zrobić to jeszcze prościej. Wystarczy w templatce przypisać event np do diva:

I w komponencie nasze handlery:

Generalnie ciekawa sprawa:) To by było na tyle w tym odcinku!

2 thoughts on “ANGULAR – Tips & Tricks cz. III

  1. Przy resize/scroll nie trzeba używać diva z templatki, można wykorzystać HostListener
    @HostListener(‚window:resize’, [‚$event’])
    onResize(event) {
    console.log(event.target.innerWidth);
    }

    1. oczywiście można zrobić tak jak mówisz. Bardziej chodziło o trick, z (window:scroll). Ale to nadal nie jest najlepsze rozwiązanie. Powinno się skorzystać z EventManagera i zrobić globalny event, zamiast w konkretnym komponencie użyć HostLinstenera. Poświęcę temu osobny artykuł, być może kolejny.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *