首頁 > web前端 > js教程 > Angular2進階之如何避免Dom迷思

Angular2進階之如何避免Dom迷思

不言
發布: 2018-04-03 09:33:08
原創
1025 人瀏覽過

這篇文章主要介紹了Angular2進階之如何避免Dom迷思,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

前言

#Angular2的設計目標本來就是要讓瀏覽器和DOM獨立。 DOM是複雜的,因此使元件與它分離,會讓我們的應用程序,更容易測試和重構。為了支援跨平台,Angular也透過抽象封裝了不同平台的差異。

內容

1.為什麼不能直接操作DOM?

Angular2採用AOT靜態編譯模式,這種形式下需要我們的模板類型必須是穩定和安全的,直接使用javascript和jquery語言是不穩定,因為他們的編譯不會事先發現錯誤,所以angular2才會選擇javascript的超集typescript語言(這種語言編譯期間就能發現錯誤)。

2.三種錯誤操作DOM的方式:

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

 doBadThings() {
  $('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

<p>商品信息</p>
<ul>
 <li *ngFor="let product of dataSource| async as list">
  {{product.title}}
 </li>
</ul>
<p #dia>
</p>
登入後複製

product.component.ts

import { Component, OnInit,Renderer2, ViewChild,ElementRef,AfterViewInit} from &#39;@angular/core&#39;;
@Component({
 selector: &#39;app-product&#39;,
 templateUrl: &#39;./product.component.html&#39;,
 styleUrls: [&#39;./product.component.css&#39;]
})

export class ProductComponent implements OnInit,AfterViewInit {
 @ViewChild(&#39;dia&#39;) dia:ElementRef ;定义子试图
 ngOnInit() {
 /**1.
 *创建一个文本
 */
  this.dia.nativeElement.innerHTML="这只是一个测试的文档";

 /**2.
  *添加click事件
  */
 let ul=this.element.nativeElement.querySelector(&#39;ul&#39;);
  this.render2.listen(ul,"click",()=>{
   this.render2.setStyle(ul,"background","blue");

ngAfterViewInit(){
/**3.
 *修改背景颜色
 */
 let li=this.element.nativeElement.querySelector(&#39;ul&#39;);
 this.render2.setStyle(li,"background","red");
 }
}
登入後複製

#總結

學習一種語言其實我們首先應該去遵循他的規範,接受他和之前語言的不同之處,然後再去深入理解和之前的方式不一樣在哪裡,為什麼這麼做,否則我們無法理解這種語言的妙處,希望對你有幫助!




##############################################################################################################

以上是Angular2進階之如何避免Dom迷思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板