一文聊聊Angular中怎么操作DOM元素

第一文聊聊Angular中怎么操作DOM元素在angular獲取DOM元素可以使用JavaScript的原生API，或者引入jQuery通過(guò)jquery對(duì)象操作DOM，但angular已經(jīng)給我們提供了相應(yīng)的API（ElementRef）來(lái)獲取DOM元素，就沒(méi)必要使用原生的API或者jQuery了。

ElementRef獲取DOM元素

1、創(chuàng)建TestComponent組件，模板如下：ponent.html

div

p你好/p

/div

div

span世界/span

/div

h1標(biāo)題/h1

pass-badgeid=componenttextColor=red組件/pass-badge

2、編寫(xiě)ponent.ts文件

import{Component,OnInit}from@angular/core

//1、導(dǎo)入ElementRef類(lèi)

import{ElementRef}from@angular/core

import{PassBadge}from./compoment/pass-badge/ponent

@Component({

selector:app-test,

templateUrl:./ponent.html,

styleUrls:[./ponent.CSS],

declarations:[PassBadge]

exportclassTestComponentimplementsOnInit{

//2、將ElementRef類(lèi)注入test組件中

constructor(privateel:ElementRef){}

ngOnInit(){

//3、獲取DOM元素

console.log(this.el.nativeElement)

console.log(this.el.nativeElement.querySelector(#component))

}

我們來(lái)看看this.el.nativeElement是什么

所以就可以通過(guò)this.el.nativeElement.querySelector(#component)來(lái)操作對(duì)應(yīng)的DOM元素。例如改變文字顏色就可以

this.el.nativeElement.querySelector(#component).style.color=lightblue

模板變量獲取DOM元素

可以通過(guò)ViewChild獲取組件，同樣的還有ContentChild，ViewChildren和ContentChildren

1、修改TestComponent組件，為對(duì)應(yīng)元素加上模板變量，如下

div

p你好/p

/div

!--1、給元素加入模板變量div--

div#div

span世界/span

/div

h1標(biāo)題/h1

!--給組件加入模板變量component--

pass-badge#componenttextColor=red組件/pass-badge

2、修改ponent.ts，如下：

import{Component,OnInit}from@angular/core

import{ElementRef}from@angular/core

//2、引入ViewChild

import{ViewChild}from@angular/core

@Component({

selector:app-test,

templateUrl:./ponent.html,

styleUrls:[./ponent.css]

exportclassTestComponentimplementsOnInit{

constructor(privateel:ElementRef){}

//3、獲取元素

@ViewChild(component)dom:any;

@ViewChild(div)div:any;

ngOnInit(){

console.log(this.dom)//PassBadgeComponent

this.dom.fn()//調(diào)用passbadge組件的fn方法

console.log(this.div)//ElementRef

this.div.nativeElement.style.color=lightblue//文字顏色修改為淡藍(lán)色

}

最終結(jié)果如下

由結(jié)果我們可以知道，當(dāng)使用ViewChild模板變量獲取組件元素時(shí)，獲取到的是組件導(dǎo)出的組件類(lèi)（上例是PassBadgeComponent），這時(shí)候只可以操作組件中含有的