這篇文章主要介紹了關於Angular如何正確的操作DOM，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
無奈接手了一個舊項目，上一個老哥在Angular專案中大量使用了JQuery來操作DOM，真的是太不講究了。那麼如何優雅的使用Angular的方式來操作DOM呢？
獲取元素
1、ElementRef --- A wrapper around a native element inside of a View.
在組件的 constructor中註入ElementRef，可以取得到整個組件元素的包裹。
@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
constructor( private el: ElementRef
) { }
ngOnInit() {
}
getDomTest() {
console.dir(this.el);
}
｝登入後複製
ElementRef中的nativeElement即是元件最外層的DOM元素。再透過原生的DOM定位方式，即可取得指定的selector元素。
getDomTest() {
console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素
}登入後複製
2、@viewChild() --- You can use ViewChild to get the first element or the directive matching the selector from the view DOM.
## #@viewChild可以取得指定的元素， 指定的方式可以是本機變數或元件類型；// HTML
<p class="tip-test-wrapper">
<button class="test-get-dom" (click)="getDomTest()">测试获取DOM</button>
</p>
<app-dialog></app-dialog>
// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';
@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
// 通过本地变量获取元素 可通过read来指定获取的元素类型
@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
@ViewChild('testdom') viewelement: ElementRef;
// 通过组件类型来获取
@ViewChild(DialogComponent) viewcontent: DialogComponent;
constructor(
private el: ElementRef
) { }
ngOnInit() {
}
getDomTest() {
// console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
console.dir(this.viewcontainer);
console.dir(this.viewelement);
console.dir(this.viewcontent);
}
}登入後複製
備註：ElementRef或@ viewChild 取得元素，一定要在 ngAfterViewInit 週期之後再使用。
3、@viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.
@viewChild會傳回符合條件的第一個會傳回符合條件的第一view個元素，如果需要取得多個符合條件的元素呢？
@viewChildren會傳回所有符合條件的元素的list。
指定selector的方式與@viewChild一致。 // 复制一个元素
<p class="tip-test-wrapper">
<button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
</p>
<p class="tip-test-wrapper">
<button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
</p>
</p>
<app-dialog></app-dialog>
<app-dialog></app-dialog>// tsimport { DialogComponent } from './../../common/components/dialog/dialog.component';
@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
@ViewChild('testdom') viewelement: ElementRef; @ViewChildren('testdom') viewelements: QueryList<any>;登入後複製
@ViewChild(DialogComponent) viewcontent: DialogComponent; @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;
constructor( private el: ElementRef
) { }
ngOnInit() {
}
getDomTest() { // console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // console.dir(this.viewcontainer);
console.dir(this.viewelement);
console.dir(this.viewelements);
console.dir(this.viewcontent);
console.dir(this.viewcontents);
}登入後複製
操作DOM --- Renderer2
在取得dom之後，如何對dom進行操作？原生的domAPI是一種選擇，但是Angular提供了更好的跨平台方式 Renderer2。
引入
Renderer2 ,
然後在construct中註入。 import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, , ViewChildren, QueryList} from '@angular/core';
import { DialogComponent } from './../../common/components/dialog/dialog.component';
@Component({
selector: 'app-test-page',
templateUrl: './test-page.component.html',
styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
@ViewChild('testdom') viewelement: ElementRef;
@ViewChildren('testdom') viewelements: QueryList<any>;
@ViewChild(DialogComponent) viewcontent: DialogComponent;
@ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;
constructor(
private el: ElementRef
) { }
ngOnInit() {
}
getDomTest() {
}
｝登入後複製
，如下：
總結
# 透過elementRef或@ viewChild @viewChildren取得元素，再透過renderer2提供的API來操作元素。不過記得在不要在 ngAfterViewInit 週期之前使用。透過Angular提供的方式，可以滿足大部分的操作DOM的需求了。如果有特殊的場景，當然還是原生DOM擼起來呀
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
原生JS和jQuery分別使用jsonp來取得「目前天氣資訊」
JavaScript Error對象的解析
以上是Angular如何正確的操作DOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！
