這次給大家帶來Angular怎樣避免使用Dom的誤區,Angular使用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 '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit,AfterViewInit { @ViewChild('dia') dia:ElementRef ;定义子试图 ngOnInit() { /**1. *创建一个文本 */ this.dia.nativeElement.innerHTML="这只是一个测试的文档"; /**2. *添加click事件 */ let ul=this.element.nativeElement.querySelector('ul'); this.render2.listen(ul,"click",()=>{ this.render2.setStyle(ul,"background","blue"); ngAfterViewInit(){ /**3. *修改背景颜色 */ let li=this.element.nativeElement.querySelector('ul'); this.render2.setStyle(li,"background","red"); } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#怎麼使用FileReader API建立Vue的檔案讀取器
以上是Angular怎樣避免使用Dom的誤區的詳細內容。更多資訊請關注PHP中文網其他相關文章!