Angular Tips & Tricks cz. V

Kolejna odsłona artykułu z serii Tips & Tricks! Standardowo bez zbędnego lania wody, lecimy!

1. TOKEN APP_INITIALIZER

Angular umożliwia nam uruchomienie dowolnej funkcji podczas inicjalizacji aplikacji, dzięki temu możemy wywołać dany kod przed zrenderowaniem czegokolwiek. Link do dokumentacji:
APP_INITIALIZER

Jak widzimy w dokumentacji:
„A function that will be executed when an application is initialized.”

LIVE EXAMPLE (w pliku app.module.ts)

Bardzo przydatne, jak np. chcemy załadować jakąś konfigurację lub wykonać call HTTP jeszcze przed załadowaniem aplikacji.

2. ExportAs

Zaglądając do dokumentacji @Directive, trafiamy na opcjonalną propercję exportAs. Można ją bardzo prosto wytłumaczyć:

ExportAs pozwala nam uzyskać dostęp do konkretnej instancji dyrektywy.

Zapewne nieraz już sięgałeś do instancji komponentu, w następujący sposób:

W ten oto prosty sposób za pomocą dekoratora @ViewChild, otrzymujemy dostęp do instancji konkretnego komponentu na widoku, w tym przypadku SidebarComponent (można również wspomóc się template-variable (#))

Nałóżmy teraz na nasz komponent dyrektywę o selektorze „someDirective”:

Która prezentuje się następująco:

Dzięki użyciu exportAs możemy już uzyskać dostęp do konkretnej instancji dyrektywy przypisując ją do template variable (#):

…i sięgać teraz do jej metod publicznych, uprzednio łapiąć do niej referencję poprzez @ViewChild:

lub bezpośrednio w templatce, bez użycia ViewChild:

ExportAs jest przydatny zawsze, kiedy chcemy umożliwić dostęp do API dyrektywy.

3. Dekorator @Attribute

Niezbyt popularny dekorator.
DOKUMENTACJA @ATTRIBUTE

Mogliby w dokumentacji go nieco lepiej opisać.

Czemu służy? Przykładowo, mamy komponent:

Dekorator @Attribute, pozwala nam uzyskać dostęp do atrybutu hosta, czyli z poziomu klasy HelloWorldComponent, możemy odczytać nałożony na niego ID (lub jakikolwiek inny atrybut). Aby uzyskać dostęp do atrybutu hosta, wstrzykujemy dekorator do konstruktora elementu:

A do parametru dekoratora, przekazujemy nazwę atrybutu, jaki chcemy odczytać (id, class etc). Oczywiście, może być również wykorzystany w dyrektywie.

LIVE EXAMPLE (HelloWorldComponent)

4. Automatyczna rejestracja usługi w Module.providers

Za pomocą Angular CLI, możemy szybko stworzyć serwis:

Powyższa komenda utworzy nam serwis we wskazanym miejscu i doda do nazwy pliku suffix .service.

Niestety dodany serwis, nie zostaje zarejestrowany w żadnym module. Jednak z pomocą odpowiedniej flagi (–module=NAZWA_MODUŁU), możemy to zrobić automatycznie:

W ten oto sposób, nasz serwis MyService został automatycznie dodany do tablicy Providers w SomeModule.

5. Observable.merge & valueChanges in Reactive Forms

W Reactive Forms, możemy nasłuchiwać na zmiany, które odbiera kontrolka:

Są sytuacje, że mamy parę kontrolek i np. niezależnie w której zajdzie zmiana, chcemy wywołać daną akcję. W takich sytuacjach, dobrze pamiętać, że mamy do dyspozycji Observable.merge i możemy złączyć dwa strumienie:

Przykład:

Observable.merge

6. StylePreporcessorOptions w .angular-cli.json

Założmy, że w katalogu assets, stworzyliśmy folder styles. Trzymamy tam np. plik variables.scss.

W tym momencie, gdy sięgamy po plik variables.scss w stylach naszych komponentów, nasze ścieżki mogą wyglądać następująco:

Czyż nie byłoby lepiej, gdyby wystarczyło wpisać:

…niezależnie, w jakim pliku jesteśmy względem pliku variables.scss? No pewnie, że tak 😉

W tym celu, przechodzimy do pliku .angular-cli.json i dodajemy stylePreprocessorOptions:

7. Globalna obsługa errorów Routingu

Angular umożliwia nam globalną obsługę errorów związanych routingiem. Robimy to w następujących krokach:

  1. Piszemy naszą klasę, która implementuje ErrorHandler:

2. Następnie w app.module.ts rejestrujemy provider:

I vuala, możemy się cieszyć wywołaniem naszego kodu podczas errorów związanych z routingiem.

Tak jak dotychczas, 7 tipów. Mam nadzieję, że chociaż jeden był dla Ciebie nowy 🙂

One Comment

Dodaj komentarz

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