Renderer2 类

Renderer2 是 Angular 框架中一个核心的抽象服务，它充当了开发者与 DOM 之间的“中间人”，允许在不直接操控 DOM 的前提下，对应用界面元素进行管理。Angular 官方推荐使用这一方式，因为它能提升应用在不同环境下的兼容性，例如服务端渲染（Server-Side Rendering）、Web Worker 以及原生移动端场景。采用 Renderer2 可让代码更加通用和健壮，避免直接操作 DOM 带来的平台依赖问题。

基本用法

在实际开发中，Renderer2 最常应用于自定义指令。Angular 指令本身是为元素逻辑修改而设计，因此两者结合十分自然。以下是一个基础示例：通过 addClass 方法，为宿主元素添加一个名为 wild 的 CSS 类。

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

在模板中为目标元素应用该指令后，渲染时会自动添加 wild 类：

  Hello World!

总体而言，使用 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 元素，渲染后的 DOM 结构如下：

  
Hello world!

setAttribute / removeAttribute

属性操作同样是常见需求。调用 setAttribute 或 removeAttribute，并传入元素引用及属性名即可：

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

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

addClass / removeClass

添加类名的方式已在上文演示。移除类名同样简单，仅需替换方法名：

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

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

对应 removeClass 的用法与之对称：

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

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

setStyle / removeStyle

利用 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

此方法用于设置元素的对象属性。例如为图片元素设置 alt 属性：

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

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

或者为输入框设置 value：

// ...

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