Dom Angular2进阶之如何避免误区

  


  

  

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进阶之如何避免误区