無(wú)奈接手了一個(gè)舊項(xiàng)目，上一個(gè)老哥在Angular項(xiàng)目中大量使用了JQuery來(lái)操作DOM，真的是太不講究了。那么如何優(yōu)雅的使用Angular的方式來(lái)操作DOM呢？

獲取元素

　　1、ElementRef? ---? ?A wrapper around a native element inside of a View.

　　　　在組件的?constructor中注入ElementRef，可以獲取到整個(gè)組件元素的包裹。

@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元素。再通過(guò)原生的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 <div class="tip-test-wrapper">
　　　// 本地變量綁定button按鈕<button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button></div>
　　// Dialog組件 <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 {// 通過(guò)本地變量獲取元素 可通過(guò)read來(lái)指定獲取的元素類型@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;@ViewChild('testdom') viewelement: ElementRef;

　 // 通過(guò)組件類型來(lái)獲取@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會(huì)返回符合條件的第一個(gè)元素，如果需要獲取多個(gè)符合條件的元素呢？@viewChildren會(huì)返回所有符合條件的元素的list。指定selector的方式與@viewChild一致。

// 復(fù)制一個(gè)元素<div class="tip-test-wrapper"><button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button></div><div class="tip-test-wrapper"><button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button></div> </div> <app-dialog></app-dialog> <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 {@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之后，如何對(duì)dom進(jìn)行操作呢？原生的domAPI是一種選擇，但是Angular提供了更好的跨平臺(tái)方式? ?Renderer2。

　　引入?Renderer2? , 然后在construct中注入。

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, Renderer2 , 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 render: Renderer2,private el: ElementRef) { }ngOnInit() {}getDomTest() {
// 修改元素顏色this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');} ｝

　　renderer2提供了豐富的API供使用，如下：

總結(jié)

　　通過(guò)elementRef或者@viewChild @viewChildren獲取元素，再通過(guò)renderer2提供的API來(lái)操作元素。不過(guò)記得在不要在 ngAfterViewInit 周期之前使用。通過(guò)Angular提供的方式，可以滿足大部分的操作DOM的需求了。如果有特殊的場(chǎng)景，當(dāng)然還是原生DOM擼起來(lái)呀

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的Angular使用总结 --- 如何正确的操作DOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。