溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Angular2進(jìn)階之如何避免Dom誤區(qū)

發(fā)布時(shí)間：2020-08-20 05:52:56 來(lái)源：腳本之家 閱讀：129 作者：常銀玲-Judy 欄目：web開發(fā)

前言

Angular2的設(shè)計(jì)目標(biāo)本來(lái)就是要讓瀏覽器和DOM獨(dú)立。DOM是復(fù)雜的，因此使組件與它分離，會(huì)讓我們的應(yīng)用程序，更容易測(cè)試和重構(gòu)。為了支持跨平臺(tái)，Angular還通過(guò)抽象封裝了不同平臺(tái)的差異。

內(nèi)容

1.為什么不能直接操作DOM？

Angular2采用AOT靜態(tài)編譯模式，這種形式下需要我們的模板類型必須是穩(wěn)定和安全的，直接使用javascript和jquery語(yǔ)言是不穩(wěn)定，因?yàn)樗麄兊木幾g不會(huì)提前發(fā)現(xiàn)錯(cuò)誤，所以angular2才會(huì)選擇javascript的超集typescript語(yǔ)言（這種語(yǔ)言編譯期間就能發(fā)現(xiàn)錯(cuò)誤）。 

2.三種錯(cuò)誤操作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操作的機(jī)制？

為了能夠支持跨平臺(tái)，Angular 通過(guò)抽象層封裝了不同平臺(tái)的差異。比如定義了抽象類 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.
 *創(chuàng)建一個(gè)文本
 */
  this.dia.nativeElement.innerHTML="這只是一個(gè)測(cè)試的文檔";

 /**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");
 }
}

總結(jié)

學(xué)習(xí)一種語(yǔ)言其實(shí)我們首先應(yīng)該去遵循他的規(guī)范，接受他和之前語(yǔ)言的不同之處，然后再去深入理解和之前的方式不一樣在哪里，為什么這么做，否則我們無(wú)法理解這種語(yǔ)言的妙處，希望對(duì)你有幫助！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手