2017-12-18 3 views

Odpowiedz

5

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.

+0

Wszelkie odniesienia, w których możemy podać szczegóły opis Renderer2 –

+0

@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) –

+0

Dzięki, @ AngularInDepth.com Oto jeszcze jeden dobry przykład tego samego https://www.concretepage.com/angular-2/angular-4-renderer2- przykład –