在 Angular 中使用Render2

Render2 是 Angular 以服务形式提供的抽象类, 网络上无论国内外的文档都对它的解释为 它允许在不直接接触 DOM 的情况下操作元素。是官方推荐改变DOM的方式。尤其在 ssr服务端渲染、移动应用等非浏览器环境下。

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

为了消除严格类型的警告或错误，请确保在tsconfig.json文件中设置 compilerOptions“strict”: false和"strictTemplates": falseangularCompilerOptions 属性。

基本使用

Renderer2 主要用于创建自定义指令。所有组件实际上都是指令。

import { Directive, ElementRef, OnInit, Renderer2, HostListener } from '@angular/core';
@Directive({
    selector: '[animate]'
})
export class Animate  {
 constructor(private renderer: Renderer2, private el: ElementRef) {}

@HostListener('click')
  performTask() {
      let randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
      this.renderer.setStyle(this.el.nativeElement, 'color', randomColor);
  }
ngOnInit() {
  this.renderer.addClass(this.el.nativeElement, 'ani');
}

}

<h2 animate>Click here to give me a random color</h2>

为什么使用Render2 而不是原生js

还记得开头的那句它允许在不直接接触 DOM 的情况下操作元素吗？外文That allows to manipulate elements of your app without having to touch the DOM directly

我觉得我们需要好好审视一下这句话的意思。

且看我们在使用中 this.el.nativeElement 就是在对DOM进行操作，而且ElementRef通过nativeElement属性暴露DOM必须在 ngOnInit()或者ngAfterViewInit 钩子中，明明是直接操作了DOM的，只是没有使用原生js API而已，就像JQ的 $('el').addClass('ani')一样。所以我认为这种解释是不准确的，并不能作为使用Render2的理由。

那么without having to touch the DOM directly到底指的是什么呢？

Angular应用程序把组件渲染成模板的过程会将组件属性编译到组件的元素上如图

alt