Angular2學習教程之組件中的DOM操作詳解
前言
有時不得不面對一些需要在組件中直接操作DOM的情況，如我們的組件中存在大量的CheckBox，我們想獲取到被選中的CheckBox，然而這些CheckBox是通過循環(huán)產生的，我們無法給每一個CheckBox指定一個ID，這個時候可以通過操作DOM來實現。angular API中包含有viewChild，contentChild等修飾符，這些修飾符可以返回模板中的DOM元素。
指令中的DOM操作
@Directive({
selector: 'p'
})
export class TodoDirective{
constructor(el: ElementRef, renderer: Renderer){
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'red');
}
}
以上聲明了一個指令，使用是需要在module中的declarations中聲明。該指令的作用是將p元素的backgroundColor設置為red。
-ElementRef是一個允許直接獲取DOM元素的一個類，該類包含一個nativeElement屬性。當不允許直接操作原生DOM元素時，該屬性值為null。
-Renderer該類包含大量可以用來操作DOM原生的方法。
@ViewChild和@ViewChildren
每一個組件都有一個視圖模板，通過 template或templateUrl引入。想要獲取視圖模板中的DOM元素則可以使用@ViewChild和@ViewChildren修飾符。他們可以接受模板變量或元素標簽或模板類名來獲取DOM節(jié)點。@ViewChild返回ElementRef類引用（獲取組件時則直接使用組件類名），而@ViewChildren返回QueryList<ElementRef> 。
//模板內容
<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標簽DOM節(jié)點，可以在ngAfterViewInit聲明周期鉤子中獲取節(jié)點信息，當然也可以在其他函數中，只要保證視圖完成初始化即可。
QueryList是一個不可變的列表，其存在一個名為changes的Observable變量，因此可以被訂閱，結合notifyOnChanges方法，可以實時查看QueryList中變量的變化。調用notifyOnChanges函數后，當組件的輸入發(fā)生變化時會觸發(fā)Observable發(fā)出新的值，這樣當todoNames: QueryList<ElementRef>有更新時，便能通過下面代碼查看到變化：
this.todoNames.changes.subscribe(data => data._results.forEach( e=>console.log(e.nativeElement.innerText))); this.todoNames.notifyOnChanges();
@ContentChild和@ContentChildren
看著與@ViewChild和@ViewChildren很相似，但@ContentChild和@ContentChildren是獲取組件標簽中的內容的，懶得寫例子，這里直接貼上angular中文官網的一個例子：
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中的內容：
<tab> <pane id="1"></pane> <pane id="2"></pane> <pane id="3" *ngIf="shouldShow"></pane> </tab>
與@ViewChild類似@ContentChild獲取的是第一個Pane指令，獲取DOM元素后，可以采用類似的方式處理。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家腳本之家的支持。
相關文章
這篇文章主要介紹了如何解決手機瀏覽器頁面點擊不跳轉瀏覽器雙擊放大網頁的相關資料,需要的朋友可以參考下2016-07-07
本篇文章主要介紹了angularjs封裝$http為factory的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Angular組件化管理實現方法,結合具體實例分析了Angular模塊組件化管理以提高代碼復用性的實現方法與相關操作技巧,需要的朋友可以參考下2017-03-03
在項目中遇到這樣的需求想把下拉框的單選改為多選，怎么實現呢？下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析，需要的朋友參考下2017-02-02
解決Angular.js中使用Swiper插件不能滑動的問題
下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
大家在使用angularjs的時候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會產生獨立的自己作用域，造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家詳細介紹了Angularjs總體介紹及數據綁定部分內容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Angular中樣式綁定解決方案,使用ngClass和ngStyle可以進行樣式的綁定,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
對angularJs中$sce服務安全顯示html文本的實例
今天小編就為大家分享一篇對angularJs中$sce服務安全顯示html文本的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11