Angular2學(xué)習(xí)教程之組件中的DOM操作詳解

前言

創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為梅州企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站制作，梅州網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

有時(shí)不得不面對(duì)一些需要在組件中直接操作DOM的情況，如我們的組件中存在大量的CheckBox，我們想獲取到被選中的CheckBox，然而這些CheckBox是通過循環(huán)產(chǎn)生的，我們無法給每一個(gè)CheckBox指定一個(gè)ID，這個(gè)時(shí)候可以通過操作DOM來實(shí)現(xiàn)。angular API中包含有viewChild，contentChild等修飾符，這些修飾符可以返回模板中的DOM元素。

指令中的DOM操作

@Directive({
 selector: 'p'
})
export class TodoDirective{
 constructor(el: ElementRef, renderer: Renderer){
  renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'red');
 }
}

以上聲明了一個(gè)指令，使用是需要在module中的declarations中聲明。該指令的作用是將p元素的backgroundColor設(shè)置為red。

-ElementRef是一個(gè)允許直接獲取DOM元素的一個(gè)類，該類包含一個(gè)nativeElement屬性。當(dāng)不允許直接操作原生DOM元素時(shí)，該屬性值為null。

-Renderer該類包含大量可以用來操作DOM原生的方法。

@ViewChild和@ViewChildren

每一個(gè)組件都有一個(gè)視圖模板，通過 template或templateUrl引入。想要獲取視圖模板中的DOM元素則可以使用@ViewChild和@ViewChildren修飾符。他們可以接受模板變量或元素標(biāo)簽或模板類名來獲取DOM節(jié)點(diǎn)。@ViewChild返回ElementRef類引用（獲取組件時(shí)則直接使用組件類名），而@ViewChildren返回QueryList<ElementRef> 。

//模板內(nèi)容
<p *ngFor='let item of todos' #name>{{ item.name }}</p>

//組件中獲取DOM
@ViewChildren('name')
todoNames: QueryList<ElementRef>;

@ViewChild('name')
todoName: ElementRef;
ngAfterViewInit(){
 this.todoNames.forEach(e=>console.log(e.nativeElement.innerText));
 console.log(this.todoName.nativeElement.innerText);
}

@ViewChild('name')和@ViewChildren('name')通過name模板變量獲取p標(biāo)簽DOM節(jié)點(diǎn)，可以在ngAfterViewInit聲明周期鉤子中獲取節(jié)點(diǎn)信息，當(dāng)然也可以在其他函數(shù)中，只要保證視圖完成初始化即可。

QueryList是一個(gè)不可變的列表，其存在一個(gè)名為changes的Observable變量，因此可以被訂閱，結(jié)合notifyOnChanges方法，可以實(shí)時(shí)查看QueryList中變量的變化。調(diào)用notifyOnChanges函數(shù)后，當(dāng)組件的輸入發(fā)生變化時(shí)會(huì)觸發(fā)Observable發(fā)出新的值，這樣當(dāng)todoNames: QueryList<ElementRef>有更新時(shí)，便能通過下面代碼查看到變化：

this.todoNames.changes.subscribe(data => data._results.forEach(
 e=>console.log(e.nativeElement.innerText)));
this.todoNames.notifyOnChanges();

@ContentChild和@ContentChildren

看著與@ViewChild和@ViewChildren很相似，但@ContentChild和@ContentChildren是獲取組件標(biāo)簽中的內(nèi)容的，懶得寫例子，這里直接貼上angular中文官網(wǎng)的一個(gè)例子：

import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
@Directive({selector: 'pane'})
export class Pane {
 @Input() id: string;
}
@Component({
 selector: 'tab',
 template: `
 <div>panes: {{serializedPanes}}</div> 
 `
})
export class Tab {
 @ContentChildren(Pane) panes: QueryList<Pane>;
 get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
}
@Component({
 selector: 'example-app',
 template: `
 <tab>
  <pane id="1"></pane>
  <pane id="2"></pane>
  <pane id="3" *ngIf="shouldShow"></pane>
 </tab>
 <button (click)="show()">Show 3</button>
 `,
})
export class ContentChildrenComp {
 shouldShow = false;
 show() { this.shouldShow = true; }
}

可以看出@ContentChildren(Pane) panes: QueryList<Pane>;獲取的是組件Tab中的內(nèi)容：

 <tab>
  <pane id="1"></pane>
  <pane id="2"></pane>
  <pane id="3" *ngIf="shouldShow"></pane>
 </tab>

與@ViewChild類似@ContentChild獲取的是第一個(gè)Pane指令，獲取DOM元素后，可以采用類似的方式處理。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家創(chuàng)新互聯(lián)的支持。

分享文章：Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
文章路徑：http://bm7419.com/article14/jdcgge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站收錄、網(wǎng)站制作、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)