所述Renderer2类是由角在一个服务的形式，其允许操纵应用程式的元件，而不必直接触摸DOM提供的抽象。这是推荐的方法，因为这样可以更轻松地开发可以在没有 DOM 访问权限的环境中呈现的应用程序，例如在服务器、Web 工作者或本地移动设备上。

请注意，原来的Renderer服务现已弃用，取而代之的是Renderer2

基本用法

你会经常在自定义指令中使用Renderer2，因为 Angular 指令是修改元素的逻辑构建块。这是一个简单的示例，它使用 Renderer2 的addClass方法将百搭类添加到具有指令的元素：

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

@Directive({
  selector: '[appGoWild]'
})
export class GoWildDirective implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

请注意我们还如何使用ElementRef来访问我们的指令附加到的下划线本机元素。

现在，您可以将指令添加到模板中的元素，并在呈现时添加百搭类：

<h1 appGoWild>
  Hello World!
</h1>
<!-- <h1 class="wild">Hello World!</h1> -->

可以看到整体使用Renderer2并不比直接操作DOM复杂。现在让我们回顾一些最有用的方法：

createElement / appendChild / createText

创建新的 DOM 元素并将它们附加到其他元素中。在这个例子中，我们创建了一个新的div并创建了一个文本节点。然后我们将文本节点放在我们的新 div 中，最后我们的div被添加到我们的指令引用的元素中：

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

ngOnInit() {
  const div = this.renderer.createElement('div');
  const text = this.renderer.createText('Hello world!');

  this.renderer.appendChild(div, text);
  this.renderer.appendChild(this.el.nativeElement, div);
}

考虑到我们在文章元素上应用了指令，我们的模板在呈现后将如下所示：

<article>
  <div>Hello world!</div>
</article>

setAttribute / removeAttribute

使用setAttribute或removeAttribute来做到这一点，设置或删除一个属性：

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

ngOnInit() {
  this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}

添加类/删除类

要addClass你可以做到以下几点：

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

ngOnInit() {
  this.renderer.addClass(this.el.nativeElement, 'wild');
}

我们已经在上面的例子中介绍了addClass。至于removeClass，只需提供元素引用和要删除的类的名称：

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

ngOnInit() {
  this.renderer.removeClass(this.el.nativeElement, 'wild');
}

设置样式/删除样式

使用setStyle使用 Renderer2 添加内联样式：

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

ngOnInit() {
  this.renderer.setStyle(
    this.el.nativeElement,
    'border-left',
    '2px dashed olive'
  );
}

…和removeStyle将其删除：

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

ngOnInit() {
  this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}

设置属性

通过以下示例，您可以在图像元素上设置alt属性：

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

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}

…或设置输入字段的值：

// ...

ngOnInit() {
  this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
}

😄 我们的概述到此结束。有关可用方法的完整列表，请参阅API 文档。