2017-12-18 143 views

Trả lời

5

Trong ngữ cảnh trình duyệt thông thường Renderer2 là trình bao bọc mặc định đơn giản xung quanh API trình duyệt thao tác DOM. Ví dụ, đây là the implementation chỉ một vài trong số các phương pháp của nó:

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); } 

Nó được giới thiệu với các hoạt động trừu tượng vẽ xa các yếu tố DOM tinh khiết. Ví dụ: nếu bạn cần thêm lớp học, bạn sẽ làm như sau:

constructor(el: ElementRef, renderer: Renderer2) { 
    renderer.addClass(el.nativeElement, 'some'); 
} 

Ở đây bạn có thể thấy rằng bạn không tương tác trực tiếp với các yếu tố gốc và không sử dụng API của nó nó với jQuery:

constructor(el: ElementRef) { 
    $(el.nativeElement).addClass('some'); 
} 

Mã với trình kết xuất có lợi ích khi có thể chạy trên nền tảng khác không phải DOM. Ví dụ: Angular cung cấp triển khai Renderer2 cho một webworker WebWorkerRenderer2. Nó thực hiện các phương thức API như addClass sử dụng postMessage các phương thức để giao tiếp với ứng dụng chính mà DOM cần được cập nhật.

+0

Bất kỳ tham chiếu nào mà chúng tôi có thể có mô tả chi tiết về Renderer2 –

+0

@MantuNigam, tôi không nghĩ có bất kỳ sự khác biệt nào với [nguồn] (https://github.com/angular/angular/blob/e3140ae888ac4037a5f119efaec7b1eaf8726286/packages/ platform-browser/src/dom/dom_renderer.ts # L102) –

+0

Xin cảm ơn, @ AngularInDepth.com Đây là một ví dụ hay về cùng https://www.concretepage.com/angular-2/angular-4-renderer2- ví dụ: –

Các vấn đề liên quan