Angular 对native元素的封装操作 ElementRef，Renderer2

　　Angular 为了支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了API接口。

（1） ElementRef，Renderer2

　　 从单词上看是  Element 与 Ref 的合体，即 元素地址的引用，常常用来操作元素。 

　　 从官方文档上来说： 在应用层直接操作DOM，会造成应用层与渲染层之间的强耦合，导致我们的应用无法运行在不同的环境。

　　 　　　　　　　　　 在web workder环境，是不能直接操作DOM。

　　 　　　　　　　　    通过ElementRef 我们就可以封装不同平台下视图中的 nativeElement。

　　 ElementRef 其实只有一个属性，即 nativeElement。

　　 在浏览器环境中，this.elementRef.nativeElement 是一个HTML元素，拥有 querySelector() 等方法，即使我们不能直接显示调用出来。

Object.prototype.toString.call(this.elementRef.nativeElement)
[object HTMLElement]

　　

　　 如果我们修改某个元素的属性，比如颜色，按照直接操作DOM的方法，如下：

    let btnADDCount = this.elementRef.nativeElement.querySelector('#btnAddCount');
    btnADDCount.style.backgroundColor = 'red';

　　 但是，官方推荐 使用 Render2 提供的安全的API。如下：

  ngAfterViewInit(): void {
    let btnADDCount = this.elementRef.nativeElement.querySelector('#btnAddCount');
    this.renderer.setStyle(btnADDCount, 'backgroundColor', 'red');
  }

　　Render2 提供了一系列操作DOM的方法，比如 createElement，createText，destroyNode 等等。

　　因此，ElementRef 与 Renderer2 常常一起出现。

(2) ViewChild 与 ViewChildren

　   ViewChild　

　　　　属性装饰器，用来从模版视图获取匹配的元素。

export interface ViewChildDecorator {
    (selector: Type<any> | Function | string, opts?: {
        read?: any;
    }): any;
    new (selector: Type<any> | Function | string, opts?: {
        read?: any;
    }): ViewChild;
}

　　selector:

　　　　1、字符串形式的模版引用变量 

　<button #btnAddCount >增加点击次数</button>
===========================================================
  @ViewChild('btnAddCount')
  btnAddCount: ElementRef;

　　　　2、 directive或者Component

<app-counter [count]="initialCount" (changeCount)="parentChangeCount($event)"></app-counter>

==========================================
  @ViewChild(CounterComponent)
  appCounter: CounterComponent;

　　      3、TemplateRef

　　    ViewChildren

　　　　属性装饰器，用来从模版视图中获取匹配的多个元素。　

  @ViewChildren(CounterComponent)
  appCounterList: QueryList<CounterComponent>;