在 Angular 中，使用 Renderer 比 ElementRef 有什么优势？答案

【问题标题】：In Angular, what are the advantages of using Renderer over ElementRef?在 Angular 中，使用 Renderer 比 ElementRef 有什么优势？
【发布时间】：2021-09-01 03:48:56
【问题描述】：

我是 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');
  }
}

教程中的讲师说它更安全，并建议使用渲染器而不是直接访问，但没有明确解释原因。他的意思是使用 ElementRef 直接访问 DOM，但从代码中可以看出，Renderer 也使用了 ElementRef。有了这个，我对是什么让 Renderer 比 ElementRef 更安全和更有优势感到困惑。

【问题讨论】：

标签： node.js angular typescript ecmascript-6 single-page-application

【解决方案1】：

来自角度文档

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

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

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

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

Renderer2 类是 Angular 以形式提供的抽象允许在没有必须直接接触 DOM。这是推荐的方法因为这样可以更轻松地开发可渲染的应用程序在没有 DOM 访问权限的环境中，例如在服务器上，在网络工作者或原生移动设备。

所以当不支持直接访问原生元素时，你应该使用渲染器

【讨论】：

感谢您，但正在寻找渲染器“可以安全使用”的原因。

【解决方案2】：

本教程的作者解释了为什么它是一种更好的方法。他说，'因为可能是您的应用程序没有在可以访问 DOM 的环境中运行。 Angular 也适用于 ServiceWorkers...'。它在 Angular 完整指南（2021 版）中，第 94 课，5:40

看看： https://betterprogramming.pub/angular-manipulate-properly-the-dom-with-renderer-16a756508cba

【讨论】：