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

第一文聊聊Angular中怎么操作DOM元素在angular获取DOM元素可以使用JavaScript的原生API，或者引入jQuery通过jquery对象操作DOM，但angular已经给我们提供了相应的API（ElementRef）来获取DOM元素，就没必要使用原生的API或者jQuery了。

ElementRef获取DOM元素

1、创建TestComponent组件，模板如下：ponent.html

div

p你好/p

/div

div

span世界/span

/div

h1标题/h1

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

2、编写ponent.ts文件

import{Component,OnInit}from@angular/core

//1、导入ElementRef类

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类注入test组件中

constructor(privateel:ElementRef){}

ngOnInit(){

//3、获取DOM元素

console.log(this.el.nativeElement)

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

}

我们来看看this.el.nativeElement是什么

所以就可以通过this.el.nativeElement.querySelector(#component)来操作对应的DOM元素。例如改变文字颜色就可以

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

模板变量获取DOM元素

可以通过ViewChild获取组件，同样的还有ContentChild，ViewChildren和ContentChildren

1、修改TestComponent组件，为对应元素加上模板变量，如下

div

p你好/p

/div

!--1、给元素加入模板变量div--

div#div

span世界/span

/div

h1标题/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()//调用passbadge组件的fn方法

console.log(this.div)//ElementRef

this.div.nativeElement.style.color=lightblue//文字颜色修改为淡蓝色

}

最终结果如下

由结果我们可以知道，当使用ViewChild模板变量获取组件元素时，获取到的是组件导出的组件类（上例是PassBadgeComponent），这时候只可以操作组件中含有的