angular中怎么操作DOM元素

	
你好


世界

标题
组件

import{Component,OnInit}from'@angular/core';
//1、导入ElementRef类
import{ElementRef}from'@angular/core';
import{PassBadge}from'./compoment/pass-badge/pass-badge.component'

@Component({
selector:'app-test',
templateUrl:'./test.component.html',
styleUrls:['./test.component.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.querySelector('#component').style.color='lightblue'

你好



世界

标题

组件

import{Component,OnInit}from'@angular/core';
import{ElementRef}from'@angular/core';
//2、引入ViewChild
import{ViewChild}from'@angular/core'

@Component({
selector:'app-test',
templateUrl:'./test.component.html',
styleUrls:['./test.component.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'	//文字颜色修改为淡蓝色
}
}