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，它提供了可以   即使不直接访问本机元素也可以安全使用   支持。”

或者其他说明，何时需要使用渲染器

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

Renderer2类是Angular提供的一种抽象形式   服务的功能，无需操作即可操作应用程序的元素   必须直接接触DOM。这是推荐的方法   因为这样可以更轻松地开发可渲染的应用   在没有DOM访问权限的环境中（例如在服务器上）   网络工作者或本地移动设备上。

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

在Angular中，使用Renderer而不是ElementRef有什么优势？

1 个答案: