在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 的优势和安全性在哪里。

- thox

Answer 1

来自Angular文档的内容：

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

当需要直接访问DOM时，请将此API作为最后一步。请改用由Angular提供的模板化和数据绑定。或者，您可以查看Renderer，它提供的API即使在不支持对本机元素的直接访问时也可以安全使用。

或者当我们需要使用renderer进行解释：

Renderer是一个类，它部分抽象了DOM。使用Renderer操作DOM不会破坏服务器端呈现或Web Workers（其中直接访问DOM将破坏）。

Renderer2类是Angular提供的抽象，以服务形式提供，允许操作您应用程序的元素而无需直接触摸DOM。这是推荐的方法，因为它使开发可以在没有DOM访问权限的环境中呈现应用程序变得更加容易，例如在服务器上，在Web工作程序中或在本地移动设备上。

因此，当不支持对本机元素的直接访问时，应使用renderer。

- Tony Ngo

---

谢谢您的回复，但我想知道为什么“Renderer可以安全使用”。 - thox

Answer 2

本教程的作者解释了为什么这是更好的方法。他说：“因为你的应用程序可能没有访问DOM的环境。Angular也可以与ServiceWorkers一起使用...”。这在《Angular完全指南（2021年版）》第94课，5:40中有所体现。

请参见： https://betterprogramming.pub/angular-manipulate-properly-the-dom-with-renderer-16a756508cba。

- GarfieldKlon