前言
Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的，因此使组件与它分离，会让我们的应用程序，更容易测试和重构。为了支持跨平台，Angular还通过抽象封装了不同平台的差异。
内容
1.为什么不能直接操作DOM？
Angular2采用AOT静态编译模式，这种形式下需要我们的模板类型必须是稳定和安全的，直接使用javascript和jquery语言是不稳定，因为他们的编译不会提前发现错误，所以angular2才会选择javascript的超集typescript语言（这种语言编译期间就能发现错误）。
2.三种错误操作DOM的方式：
doBadThings() {
$('id').click(); //jquery
this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
document.getElementById('id'); //javascript
}
}
$('id').click(); //jquery
this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
document.getElementById('id'); //javascript
}
}
3.Angular2如何DOM操作的机制？
为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。
4.正确操作DOM的方式（ElementRef和Renderer2）：
product.component.html
商品信息
