Angular2的设计目标本来就是要让浏览器和DOM独立.DOM是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试和重构。为了支持跨平台,角还通过抽象封装了不同平台的差异。
<强> 1。为什么不能直接操作DOM ? 强>
Angular2采用AOT静态编译模式,这种形式下需要我们的模板类型必须是稳定和安全的,直接使用javascript和jquery语言是不稳定,因为他们的编译不会提前发现错误,所以Angular2才会选择javascript的超集打印稿语言(这种语言编译期间就能发现错误)只
<强> 2。三种错误操作DOM的方式:强>
@ component ({…}) 出口类HeroComponent { 构造函数(私人_elementRef: ElementRef) {} doBadThings () { $ (id) .click ();//jquery this._elementRef.nativeElement。xyz=";//原生的ElementRef . getelementbyid (“id”);//javascript } } >之前<强> 3。Angular2如何DOM操作的机制? 强>
为了能够支持跨平台,角通过抽象层封装了不同平台的差异。比如定义了抽象类渲染器,Renderer2,抽象类RootRenderer等。此外还定义了以下引用类型:ElementRef, TemplateRef, ViewRef, ComponentRef和ViewContainerRef等只
<>强4。正确操作DOM的方式(ElementRef和Renderer2): 强>
product.component.html
& lt; div>商品信息& lt;/div> & lt; ul> & lt;李* ngFor=叭貌肥菰磡异步的列表”比; {{product.title}} & lt;/li> & lt;/ul> & lt; div# dia> & lt;/div> >之前product.component.ts
进口{组件;/* * 2。 *添加点击事件 */让ul=this.element.nativeElement.querySelector (“ul”); this.render2.listen (ul、“点击”,()=祝辞{ this.render2.setStyle (ul、“背景”、“蓝色”); ngAfterViewInit () {/* * 3。 *修改背景颜色 */让李=this.element.nativeElement.querySelector (“ul”); this.render2.setStyle(李,“背景”、“红”); } }<强>总结强>
学习一种语言其实我们首先应该去遵循他的规范,接受他和之前语言的不同之处,然后再去深入理解和之前的方式不一样在哪里,为什么这么做,否则我们无法理解这种语言的妙处,希望对你有帮助!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
Dom Angular2进阶之如何避免误区