renderer2 in Angular

Renderer2是Angular提供的操作element的抽象类，使用该类提供的方法，能够实现在不直接接触DOM的情况下操作页面上的元素。
在Angular的custom directive中，Renderer2类中提供的方法非常实用，下面就以一个directive为例，具体的看一下Renderer2的常用方法吧~

1. addClass / removeClass 通过addClass方法，在directive的宿主元素添加或删除class:

   import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';
   
   @Directive({
       selector: '[testRenderer2]'
   })
   export class TestRenderer2Directive implements OnInit {
       constructor(private renderer: Renderer2, private el: ElementRef) {}
   
       ngOnInit() {
       this.renderer.addClass(this.el.nativeElement, 'test-renderer2');
       // this.renderer.removeClass(this.el.nativeElement, 'old-class');
       }
   }
   

2. createElement / appendChild / createText 创建一个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);
   }
   

   渲染后的DOM结构：

   <article> // 任意宿主元素
       <div>Hello world!</div>
   </article>
   

3. setAttribute / removeAttribute 在宿主元素上添加或删除attribute：

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

4. setStyle / removeStyle 在宿主元素上添加inline-style:

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

   移除inline-style:

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

5. setProperty 设置宿主元素的property的值：

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