前言
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
<div>商品信息</div>
<ul>
<li *ngFor="let product of dataSource| async as list">
{{product.title}}
</li>
</ul>
<div #dia>
</div>
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");
}
}
總結
學習一種語言其實我們首先應該去遵循他的規范，接受他和之前語言的不同之處，然后再去深入理解和之前的方式不一樣在哪里，為什么這么做，否則我們無法理解這種語言的妙處，希望對你有幫助！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
