Как работает класс Renderer2 в Angular
Development, Java | Комментировать запись
Класс 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
Tags: Angular