ANGULAR 2 TIPS & TRICKS cz. II

Cześć! witam w drugim artykule z serii Tips & Tricks. Wstęp zbędny, więc przejdę od razu do konkretów; )

1.  Selektor :HOST-CONTEXT

Jeśli Twój komponent ma posiadać dany styl, w zależności jaką klasę posiada jego rodzic, to wystarczy użyć w pliku ze stylami komponentu, selektora :HOST-CONTEXT:

Host-context nie dotyczy tylko bezpośredniego rodzica jak w przykładzie wyżej, w tym samym widoku. Angular wyszuka hosta aż po sam document. Możesz dodać nawet na <body> w pliku index.html host-context:

A wybrany styl dla danego komponentu z :host-content(.selected) i tak zostanie dodany.

2.  Selektor :HOST

Natomiast jeśli Twój komponent ma posiadać dany styl w zależności jaką klasę posiada, to z pomocą przychodzi nam selektor :HOST

3. EnableTracing – debugging routingu

Jeśli masz problem z routingiem, coś się nie zgadza, ze ścieżkami etc, to możesz włączyć enableTracing. Dzięki temu w konsoli będziesz nasłuchiwać na eventy związane z routingiem. EnableTracing możesz przełączyć na true, podając drugi parametr do forRoot:

Przykładowe logi z konsoli:

W konsoli widzimy cały cykl – NavigationStart, RoutesRecognized, NavigationEnd.

4. Elvis operator

Elvis operator pewno jest Ci znany – wyświetlasz na widoku jakieś property obiektu, ale obiekt jeszcze nie istnieje. Ale dzięki użyciu „?” w poniższy sposób:

Angular się nie wysypuje i wszystko ładnie się kompiluje. Co jeśli property obiektu ma nazwę ze slashem, np:

Pojawia się problem! Próba użycia:

Nie zadziała przez slash, compiler wyrzuci nam błąd. No to próba z nawiasem kwadratowym:

Też klops…. elvis działa tylko z kropką (.property). Z pomocą przychodzi nam ternary operator:

Działa!

5. Wyświetlenie wartości inputa

Jak w najprostszy sposób pokazać aktualną zawartość inputa? Wystarczy użyć template variable „#”:

A następnie w interpolacji {{ }} wrzucić nazwę przyjętego template-variable (w przykładzie myInput) i odnieść się do propercji .value. Zero dotykania klasy komponentu.

6. Export As

Jeśli zajrzysz do api komponentu lub dyrektywy, to znajdziesz tam pole exportAs:

https://angular.io/docs/ts/latest/api/core/index/Directive-decorator.html

ExportAs przyjmuje nazwę, pod którą instancja dyrektywy jest wyeksportowana w templatce.

Dzięki exportAs, masz dostęp do api dyrektywy, w dowolnym miejscu templatki. Wystarczy, że w dyrektywie dodasz property exportAs:

A następnie na widoku:

Podsumowując, dzięki użyciu exportAs, możemy od razu sięgać po metody dyrektywy.

7. WildCard

Jeśli chcesz użytkownikowi wyświetlić widok typu „page not found”, możesz użyć podwójnego asterixa: ** w ustawieniach routingu:

Wszystkie błędne urle, przekierują aplikację na widok z przekazanym komponentem.

I uwaga! ważne, aby path z ‚**’ był zadeklarowany jako ostatni path w ustawieniach routingu.

Tyle na dziś, zachęcam do lajkowania fan page na FB:

https://www.facebook.com/www.angular.love/

2 Comments

  1. Brajan Włamoszczykowski

    Może offtopic, ale brakuje mi jeszcze informacji o formatowaniu w klamrach, np. gdzie mają być spacje a gdzie bez spacji. Brakuje takich dobrych źródeł informacji w necie

Dodaj komentarz

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