angular的Dom操作

大纲

1、angular的DOM操作
2、为什么不能直接操作DOM？
3、三种错误操作DOM的方式
4、angular2如何DOM操作的机制？
5、正确操作DOM的方式
6、为什么需要ElementRef
7、使用ElementRef的代码实例及优化
8、代码资源

angular的DOM操作

angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的，因此使组件与它分离，会让我们的应用程序，更容易测试和重构。为了支持跨平台，Angular还通过抽象封装了不同平台的差异。

为什么不能直接操作DOM？

angular2采用AOT静态编译模式，这种形式下需要我们的模板类型必须是稳定和安全的，直接使用javascript和jquery语言是不稳定，因为他们的编译不会提前发现错误，所以angular2才会选择javascript的超集typescript语言（这种语言编译期间就能发现错误）。

三种错误操作DOM的方式

@Component({ ... })
export class HeroComponent {
  constructor(private _elementRef: ElementRef) {}

  doBadThings() {
    $('id').click();  //jquery
    this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
    document.getElementById('id'); //javascript
  }
}

angular2如何DOM操作的机制？

为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。

正确操作DOM的方式

angular通过ElementRef实现跨平台，用Renderer实现视图应用相分离，想必也是一种很赞的设计模式。

为什么需要ElementRef

angular一直在做的一件事情就是降低视图层和应用层之间的耦合，在应用层直接操作DOM，会导致应用层和视图层之间强耦合，导致我们不能将应用运行在不同的环境中。比如令js能够实现多线程的webWorker，在webWorker中，却不能直接操作DOM，angular为我们封装了一个对象，叫做ElementRef，能够获取到视图层中的native对象，比如在浏览器中，native对象就是DOM对象。

export class ElementRef {
  public nativeElement: any;
  constructor(nativeElement: any) { this.nativeElement = nativeElement; }
}

使用ElementRef的代码实例及优化

1、简单使用实例

通过this.elementRef.nativeElement.querySelector()获取元素节点，然后对元素及节点设置样式。

2、优化1

在ngAfterViewInit生命周期钩子中对DOM元素进行样式的初始化设置

3、优化2

利用ViewChild来获取Child DOM对象的引用。

4、优化3

angular为我们提供了一个叫做Renderer的对象，它作为视图层和应用层的粘合剂，能够使我们把视图层和应用层做到最大程度的分离。
通过注入Renderer，我们可以轻松的操作DOM，并且对视图层和应用的分离做到最大限度。

代码资源

在这里我就不粘贴源码了，这样整篇的篇幅会很大，这里我就将大概的原理粘贴出来。如果对Dom操作的代码有兴趣的读者可以从我的git上查看。angular实例代码中的angular-dom项目里就是该篇博客中提及的代码实例。