В Angular, каковы преимущества использования Renderer по сравнению с ElementRef?

Question

Я новичок в Angular, и я пытался создать свою собственную директиву, используя две опции:

• Вариант 1: Прямой доступ к элементам, используя ElementRef
• Вариант 2:Использование Renderer2

Вариант 1:

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

@Directive({
    selector: '[appBasicHighlight]'
})
export class BasicHighlightDirective implements OnInit {
    constructor(private elementRef: ElementRef) {}

    ngOnInit() {
        this.elementRef.nativeElement.style.backgroundColor = 'green';
    }
}

Вариант 2:

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

@Directive({
  selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective {

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

  ngOnInit() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'blue');
  }
}

Инструктор из учебного пособия сказал, что это намного безопаснее, и рекомендуетсяиспользуйте Renderer через прямой доступ, но не объясните явно причины.Он имел в виду прямой доступ к DOM с использованием ElementRef, но, как видно из кода, Renderer также использовал ElementRef.Из-за этого я запутался в том, что делает Renderer более безопасным и выгодным по сравнению с ElementRef.

Answer 1

Из углового документа

"Разрешение прямого доступа к DOM может сделать ваше приложение более уязвимым для атак XSS. Тщательно рассмотрите любое использование ElementRef в вашем коде. Для получения дополнительной информации см. Руководство по безопасности.. "

" Используйте этот API в качестве последнего средства, когда требуется прямой доступ к DOM. Вместо этого используйте шаблоны и привязку данных, предоставляемые Angular. В качестве альтернативы вы посмотрите на Renderer, который предоставляет API, который можно безопасно использовать.даже когда прямой доступ к собственным элементам не поддерживается. "

Или другое объяснение, когда нам нужно использовать рендерер

Рендерер - это класс, который является частичной абстракцией надДОМ.Использование Renderer для управления DOM не нарушает рендеринг на стороне сервера или веб-работников (где прямой доступ к DOM нарушается).

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

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