Sử dụng Renderer2 trong Angular

---

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 nhân viên web 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 hoang dã vào các phần tử có chỉ thị:

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 hoang dã 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);
}

Mẫu của ta , sau khi được hiển thị, 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');
}

😄 Điều này kết thúc tổng quan của ta . Tham khảo tài liệu API để biết danh sách đầy đủ các phương pháp có sẵn.

---

---

Các tin liên quan