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

Класс 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, чтобы получить доступ к подчёркнутому нативному элементу, к которому присоединена наша директива.

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

<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>
  <div>Hello world!</div>
</article>

установить атрибут/удалить атрибут

Используйте setAttribute или removeAttribute, чтобы установить или удалить атрибут:

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

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

добавить класс/удалить класс

Для addClass вы можете сделать следующее:

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

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

Мы рассмотрели addClass в нашем примере выше. Что касается removeClass, просто укажите ссылку на элемент и имя удаляемого класса:

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

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

установить стиль/удалить стиль

Используйте 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.