Angular Render2你了解吗？

Render2

介绍

Render2 是angular中用于操作dom的，Angular做了封装，屏蔽底层差异，通用性更强。不仅仅可以用于浏览器端，还可以用于Server Side rendering, Web-Worker, mobile apps, and desktop apps等。

Render2之指令用法

• setStyle、removeStyle

  # 定义指令
   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);
       this.renderer.setStyle(this.el.nativeElement, 'background-color', 'black');   
       this.renderer.removeStyle(this.el.nativeElement, 'color','red');   
   }

   }

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

• setAttribute、removeAttribute

@Directive({ 
    selector: '[defaultValue]' 
})
export class DefaultInputValueDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  @HostListener('mouseover') 
  onMouseOver() {
      this.renderer.setAttribute(this.elRef.nativeElement, 'value', 'Enter a Value');
  }
  @HostListener('mouseleave') 
  onMouseLeave() {
      this.renderer.removeAttribute(this.elRef.nativeElement, 'value');
  }   
} 

• addClass、removeClass

@Directive({ 
    selector: '[hlOnMouseOver]' 
})
export class HlOnMouseOverDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  @HostListener('mouseover') 
  onMouseOver() {
      this.renderer.addClass(this.elRef.nativeElement, 'hl-text');
  }
  @HostListener('mouseleave') 
  onMouseLeave() {
      this.renderer.removeClass(this.elRef.nativeElement, 'hl-text');
  }   
}

• removeChild、appendChild

@Directive({ 
    selector: '[removeChild]' 
})
export class RemoveChildDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  p = this.renderer.createElement('p');
  t