Lớp Renderer2 là một phần trừu tượng được cung cấp bởi Angular dưới dạng một dịch vụ cho phép thao tác các phần tử của ứng dụng của bạn mà không cần phải chạm trực tiếp vào DOM. Đây là cách tiếp cận được đề xuất vì sau đó nó giúp dễ dàng hơn trong việc phát triển các ứng dụng có thể được hiển thị trong các môi trường không có quyền truy cập DOM, như trên server, trong web thành viên hoặc trên thiết bị di động root .
Lưu ý dịch vụ Renderer ban đầu hiện đã không được dùng nữa để thay thế cho Renderer2
Cách sử dụng cơ bản
Bạn sẽ thường sử dụng Renderer2 trong các chỉ thị tùy chỉnh vì cách các chỉ thị Angular là khối xây dựng logic để sửa đổi các phần tử. Đây là một ví dụ đơn giản sử dụng phương thức addClass của Renderer2 để thêm lớp native vào các phần tử có chỉ thị:
go-wild.directive.ts
import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[appGoWild]' }) export class GoWildDirective implements OnInit { constructor(private renderer: Renderer2, private el: ElementRef) {}
Lưu ý cách ta cũng sử dụng ElementRef để truy cập vào phần tử root được gạch dưới mà chỉ thị của ta được đính kèm.
Và bây giờ, bạn có thể thêm chỉ thị vào các phần tử trong một mẫu và lớp native sẽ được thêm vào khi kết xuất:
<h1 appGoWild> Hello World! </h1> <!-- <h1 class="wild">Hello World!</h1> -->
Bạn có thể thấy rằng nhìn chung việc sử dụng Renderer2 không phức tạp hơn so với thao tác trực tiếp với DOM. Bây giờ ta hãy xem xét một số phương pháp hữu ích nhất:
createElement / appendChild / createText
Tạo các phần tử DOM mới và nối chúng bên trong các phần tử khác. Trong ví dụ này, ta tạo một div mới và ta tạo một nút văn bản. Sau đó, ta đặt nút văn bản bên trong div mới của ta và cuối cùng div của ta được thêm vào phần tử được tham chiếu bởi chỉ thị của ta :
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { const div = this.renderer.createElement('div'); const text = this.renderer.createText('Hello world!'); this.renderer.appendChild(div, text); this.renderer.appendChild(this.el.nativeElement, div); }
Sau khi được hiển thị, output sẽ trông giống như thế này, vì ta đã áp dụng chỉ thị trên một phần tử bài viết :
<article> <div>Hello world!</div> </article>
setAttribute / removeAttribute
Sử dụng setAttribute hoặc removeAttribute để thực hiện việc đó, đặt hoặc xóa một thuộc tính:
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true'); }
addClass / removeClass
Ta đã đề cập đến addClass trong ví dụ trên. Đối với removeClass , chỉ cần cung cấp tham chiếu phần tử và tên của lớp cần xóa:
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.removeClass(this.el.nativeElement, 'wild'); }
setStyle / removeStyle
Sử dụng setStyle để thêm các kiểu nội tuyến bằng Renderer2:
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.setStyle( this.el.nativeElement, 'border-left', '2px dashed olive' ); }
… Và removeStyle để loại bỏ nó:
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.removeStyle(this.el.nativeElement, 'border-left'); }
setProperty
Với ví dụ sau, bạn có thể đặt thuộc tính alt trên phần tử hình ảnh:
constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit() { this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator'); }
… Hoặc đặt giá trị của trường đầu vào:
// ... ngOnInit() { this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator'); }
