在 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 而不是直接访问，但没有明确解释原因。他的意思是使用 ElementRef 直接访问 DOM，但正如您从代码中看到的，Renderer 也使用了 ElementRef。有了这个，我对什么使 Renderer 比 ElementRef 更安全和更有优势感到困惑。

Answer 1

从角度文件

“允许直接访问 DOM 会使您的应用程序更容易受到 XSS 攻击。仔细检查代码中对 ElementRef 的任何使用。有关更多详细信息，请参阅安全指南。”

“当需要直接访问 DOM 时，使用此 API 作为最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看 Renderer，它提供了即使直接访问本机元素也可以安全使用的 API不支持。”

或者另一个解释我们什么时候需要使用渲染器

Renderer 是一个对 DOM 进行部分抽象的类。使用 Renderer 来操作 DOM 不会破坏服务器端渲染或 Web Workers（直接访问 DOM 会中断）。

Renderer2 类是由 Angular 以服务形式提供的抽象，它允许在无需直接接触 DOM 的情况下操作应用程序的元素。这是推荐的方法，因为这样可以更轻松地开发可以在没有 DOM 访问权限的环境中呈现的应用程序，例如在服务器、Web 工作者或本地移动设备上。

因此，当不支持直接访问本机元素时，您应该使用渲染器