Wróć do strony głównej
Angular

ANGULAR – manipulacja DOM w różnych środowiskach

Cześć po dłuższej przerwie! W tym krótkim artykule poruszę temat manipulacji drzewem za pomocą klasy Renderer2, która na razie jest w fazie experimental w NG4.

Jeśli manipulowałeś DOMem w Angularze 2, zapewne robiłeś to np. za pomocą:

  • vanillaJS
  • jQuery
  • nativeElement

Od wielu lat, jQuery cieszy się popularnością w kwestii manipulacji DOM. Zapewne na standardowych stronach sprawdza się dobrze,ale np. osobiście nie preferuję mieszać Angulara z jQuery. Ale skoro działa to czemu nie? No nie do końca.

Skupmy się na tym, kiedy na pewno nie powinniśmy manipulować DOMem przy użyciu jQuery lub czystego JS.

ANGULAR JAKO PLATFORMA

Angular jest platformą, która może zostać uruchomiona w różnych środowiskach, np:

  • native mobile
  • native desktop
  • web Worker
  • server side rendering

Problem w tym, że jeśli zaczynamy operować na DOMie np. za pomocą jQuery, to tracimy możliwość manipulowania DOMem w środowiskach, które nie mają dostępu do DOM API. (np powyżej wymienione).

Jeśli zależy nam aby nasza aplikacja działała poprawnie w pożądanym przez nas środowisku innym niż przeglądarka, to musimy nadać warstwę abstrakcji na UI. Pomoże nam w tym klasa Renderer2.

RENDERER2

Klasa Renderer2 jest bardzo intuicyjna. Część metod nazywa się podobnie jak w jQuery, np:

  • addClass
  • removeClass

Zbiór wszystkich metod w linku poniżej:

RENDERER2 CLASS

Aby rozpocząć pracę z klasą Renderer2, musimy ją najpierw wstrzyknąć do konstruktora klasy komponentu:

Następnie w templatce przypisujemy zmienną do elementu (#navbar), np:

Wracamy do klasy komponentu i przy użyciu ViewChild, łapiemy nasz element, na którym chcemy wykonać jakąś operację DOM:

Teraz pozostaje nam sięgnąć po jedną z metod renderera, np. listen i addClass:

Nałożyliśmy warstwę abstrakcji na nativeElement za pomocą Renderera2, teraz nasz kod być również wykonywalny w innych środowiskach. Zachęcam do przeczytania całego API.

PODSUMOWANIE

  • jeśli nie planujesz aplikacji uruchamiać w innych środowiskach niż przeglądarka, to użycie klasy Renderer2 do manipulacji DOMem jest zbędne
  • do czasu wydania NG4 istniała klasa Renderer (obecnie wycofana już), została zastąpiona klasą Renderer2

UWAGA! 

Jeśli wziąłeś udział w konkursie:
http://angular.love/2017/04/04/konferencja-js-poland-2017-wygraj-bilet-lub-skorzystaj-ze-znizki/

to prosiłbym o kontakt mailowy na poniższy adres, niestety nie widzę kto udostępnił na FB powyższy artykuł; (

[email protected]

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

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.

4 komentarzy

  1. michalczukm

    Jeden plus, że API tworzą w oparciu o to co ludzie znają. Renderer miał oczywiście swoje nazewnictwo 😉
    Ale z innej beczki – przypominają mi się varchar i varchar2 z Oracle jeśli chodzi o nazwę nowej klasy 😛

    No i oczywiście pytanie zasadnicze do twórców – kiedy Renderer się rozjedzie i zewnętrzne pakiety, których akurat ty używasz więcej niż ja, przestaną się poprawnie zachowywać 😀

  2. Pingback: Rozmowa o pracę na Angular Developera - jakich pytań możesz się spodziewać? - No Fluff Jobs - blog

Dodaj komentarz

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