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:
Aby rozpocząć pracę z klasą Renderer2, musimy ją najpierw wstrzyknąć do konstruktora klasy komponentu:
1 2 3 |
export class RendererComponent { constructor(private renderer : Renderer2) { } } |
Następnie w templatce przypisujemy zmienną do elementu (#navbar), np:
1 |
<div #navbar class="navbar">Navbar</div> |
Wracamy do klasy komponentu i przy użyciu ViewChild, łapiemy nasz element, na którym chcemy wykonać jakąś operację DOM:
1 2 3 4 5 |
export class RendererComponent implements OnInit { @ViewChild('navbar') navbar; constructor(private renderer : Renderer2) { } } |
Teraz pozostaje nam sięgnąć po jedną z metod renderera, np. listen i addClass:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
export class RendererComponent implements OnInit { @ViewChild('navbar') navbar; constructor(private renderer : Renderer2) { } ngOnInit() { this.addEventToNavbar(); } onNavbarClick() : void { this.renderer.addClass(this.navbar.nativeElement, 'active'); } addEventToNavbar() : void { this.renderer.listen(this.navbar.nativeElement, 'click', () => { this.onNavbarClick() }); } } |
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ł; (
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
ivarchar2
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ć 😀Hallo Michau:-)
Faktycznie, nazwa renderer2 brzmi raczej dość słabo, czekam na renderer3…renderer8:)
Nie strasz! stąd trzeba brać pakiety z głową, które najlepiej codziennie mają commity z poprawkami / ficzerami, to powinny iść wraz z nowym api:)
Renderer3 już jest 😉
Pingback: Rozmowa o pracę na Angular Developera - jakich pytań możesz się spodziewać? - No Fluff Jobs - blog