Angular Render2

Renderer2类是Angular以service的形式提供的抽象，允许操作应用程序的元素而无需直接触摸DOM。这是推荐的方法，因为它可以更容易地开发可以在没有DOM访问的环境中呈现的应用程序，例如在服务器上，web worker，或者原生移动上。

需要注释的是，现在已弃用原始渲染器服务，而使用Renderer2。

Basic Usage

---

由于Angular指令是修改元素的逻辑构建块，因此我们经常在自定义指令中使用Renderer2。

下面是一个使用Renderer2的addClass方法将 ‘wild’ 类添加到该指令的元素的简单示例：

Demo

// go-wild.directive.ts文件

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

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

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

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

现在，可以将指令添加到模板中的元素，并在渲染时添加wild类：

<h1 appGoWild>Hello World!</h1>

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

总体而言，使用Renderer2并不比直接操作DOM更复杂。现在让我们来看看一些最有用的方法。

createElement / appendChild / createText

---

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

Demo 1

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元素上应用了该指令：

<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 / removeClass

---

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

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

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

setStyle / removeStyle

---

使用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');
}

setProperty

---

使用以下示例，可以在image元素上设置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 documentation 。

Thank you!

END