Chcę zrozumieć, co jest i dlaczego Renderer2 jest używany kątowo do manipulacji DOM. Czy możemy użyć bogatej i sławnej biblioteki jQuery w miejsce Renderer2 lub natywnego javascript? Co jest zaletą korzystania z Renederer2 przez jQueryCo to jest Renderer2 w angular4? dlaczego jest preferowany w porównaniu z jquery?
Odpowiedz
W normalnym kontekście przeglądarki Renderer2
jest prostym domyślnym otokiem wokół API przeglądarki manipulacji DOM. Na przykład, oto the implementation zaledwie kilku swoich metod:
class DefaultDomRenderer2 implements Renderer2 {
addClass(el: any, name: string): void { el.classList.add(name); }
createComment(value: string): any { return document.createComment(value); }
createText(value: string): any { return document.createTextNode(value); }
appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); }
To zostało wprowadzone do abstrakcyjnych operacji renderowania od czystego elementów DOM. Na przykład, jeśli chcesz dodać klasę zrobiłbyś to tak:
constructor(el: ElementRef, renderer: Renderer2) {
renderer.addClass(el.nativeElement, 'some');
}
Tutaj można zobaczyć, że nie oddziałują bezpośrednio z elementów rodzimych i nie używać jej API jak zrobiłbyś to z jQuery:
constructor(el: ElementRef) {
$(el.nativeElement).addClass('some');
}
Kod z renderującego ma zaletę, że są w stanie uruchomić na platformach innych niż DOM jeśli podasz inną realizację renderującego dotyczących tej drugiej platformie. Na przykład Angular zapewnia implementację Renderer2
dla webworkera WebWorkerRenderer2
. Implementuje metody API
, takie jak: addClass
przy użyciu metod komunikacji z główną aplikacją, która wymaga aktualizacji DOM.
Wszelkie odniesienia, w których możemy podać szczegóły opis Renderer2 –
@MantuNigam, nie sądzę, że poza źródłami (https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/ platforma-przeglądarka/src/dom/dom_renderer.ts # L102) –
Dzięki, @ AngularInDepth.com Oto jeszcze jeden dobry przykład tego samego https://www.concretepage.com/angular-2/angular-4-renderer2- przykład –