Как работает класс Renderer2 в Angular

Development, Java | Amber | Комментировать запись

Класс Renderer2 — это абстракция, предоставляемая Angular в виде сервиса, что позволяет управлять элементами приложения, не касаясь DOM напрямую. Этот подход упрощает разработку приложений, которые могут рендериться в средах, не имеющих доступа к DOM, например на сервере, в веб-воркере или на мобильном устройстве, потому его рекомендуется использовать.

Примечание: Обратите внимание, что исходный сервис Renderer теперь считается устаревшим.

Базовое использование Renderer2

Renderer2 часто применяется в пользовательских директивах из-за того, что директивы Angular являются логическим строительным блоком для изменения элементов. Взгляните на простой пример, в котором используется метод из Renderer2 по имени addClass (он добавляет класс wild к элементам, имеющим соответствующую директиву):

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appGoWild]'
})
export class GoWildDirective implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.addClass(this.el.nativeElement, 'wild');
  }
}

Обратите внимание, мы также используем ElementRef, чтобы получить доступ к нативному элементу, к которому присоединена наша директива.

Теперь вы можете добавить директиву к элементам в шаблоне, после чего при рендеринге будет добавлен класс wild:

<h1 appGoWild>
  Hello World!
</h1>
<!-- <h1 class="wild">Hello World!</h1> -->

Как видите, в целом использовать Renderer2 не сложнее, чем непосредственно управлять DOM. Далее мы рассмотрим некоторые из наиболее полезных методов.

createElement/appendChild/createText

Этот метод позволяет создавать новые элементы DOM и добавлять их внутрь других элементов. В этом примере мы создадим новый div и текстовый узел. Затем мы поместим его в новый div, и, наконец, добавим div добавляется к элементу, на который ссылается директива:

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

Шаблон после рендеринга будет выглядеть так (учитывая, что мы применили директиву к элементу article):

<article>
  <div>Hello world!</div>
</article>

setAttribute / removeAttribute

Методы setAttribute и removeAttribute позволяют установить или удалить атрибут:

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}

addClass / removeClass

Чтобы добавить класс, можно использовать метод addClass

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.addClass(this.el.nativeElement, 'wild');
}

Что касается removeClass, нужно просто предоставить ссылку на элемент и имя класса, который нужно удалить.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.removeClass(this.el.nativeElement, 'wild');
}

setStyle / removeStyle

Метод setStyle добавляет встроенные стили при помощи Renderer2:

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(
    this.el.nativeElement,
    'border-left',
    '2px dashed olive'
  );
}

А метод removeStyle удаляет их:

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}

setProperty

В следующем примере показано, как установить свойство alt для элемента изображения.

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}

А здесь – как задать значение поля ввода:

// ...

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
}

На этом наш краткий обзор окончен. Более подробную информацию вы можете получить в документации API.

Читайте также: Рендеринг на серверной стороне в Angular Universal