Renderer2类是Angular以服务的形式提供的抽象，它允许在不必直接接触DOM的情况下操作应用程序的元素。这是推荐的方法，因为这样可以更容易地开发可以在不能访问DOM的环境中呈现的应用程序，例如在服务器上、在Web Worker上或在本地移动设备上。

<$>[注意]请注意，原来的渲染器 服务现在已被弃用，而支持** Renderer2** <$>

基本使用方法

您将经常在自定义directives]中使用Renderer2 ，因为角度指令是修改元素的逻辑构造块。下面是一个简单的示例，它使用Render2的S的addClass方法将Wild类添加到具有指令的元素中：

 1[label go-wild.directive.ts]
 2import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';
 3
 4@Directive({
 5  selector: '[appGoWild]'
 6})
 7export class GoWildDirective implements OnInit {
 8  constructor(private renderer: Renderer2, private el: ElementRef) {}
 9
10  ngOnInit() {
11    this.renderer.addClass(this.el.nativeElement, 'wild');
12  }
13}

<$>[注意]注意，我们还如何使用ElementRef来访问我们的指令所附加到的带下划线的原生元素。<$>

现在，您可以向模板中的元素添加指令，渲染时会添加Wild 类：

1<h1 appGoWild>
2  Hello World!
3</h1>
4<!-- <h1 class="wild">Hello World!</h1> -->

您可以看到，总的来说，使用Renderer2 并不比直接操作DOM复杂。现在让我们来看看一些最有用的方法：

createElement/appendChild/createText

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

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  const div = this.renderer.createElement('div');
5  const text = this.renderer.createText('Hello world!');
6
7  this.renderer.appendChild(div, text);
8  this.renderer.appendChild(this.el.nativeElement, div);
9}

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

1<article>
2  <div>Hello world!</div>
3</article>

setAttribute/emoveAttribute

使用setAttribute或emoveAttribute设置或删除属性即可完成此操作：

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
5}

addClass/emoveClass

要添加Class，您可以执行以下操作：

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.addClass(this.el.nativeElement, 'wild');
5}

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

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.removeClass(this.el.nativeElement, 'wild');
5}

set style/emoveStyle

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

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.setStyle(
5    this.el.nativeElement,
6    'border-left',
7    '2px dashed olive'
8  );
9}

...并删除样式以将其删除：

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.removeStyle(this.el.nativeElement, 'border-left');
5}

setProperty

在下面的示例中，您可以设置图像元素的alt属性：

1constructor(private renderer: Renderer2, private el: ElementRef) {}
2
3ngOnInit() {
4  this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
5}

...或设置输入字段的值：

1// ...
2
3ngOnInit() {
4  this.renderer.setProperty(this.el.nativeElement, 'value', 'Cute alligator');
5}

😄我们的概述到此结束。有关可用方法的完整列表，请参考接口documentation。

在 Angular 中使用 Renderer2