ViewChild操作dom

1.给dom起名字

<div #new01 id='new01' *ngIf="true">我是一个dom节点。
</div>

2.在业务逻辑里面引入ViewChild

 

3.在类里面， @ViewChild()

4  在生命周期函数中操作dom 

ngAfterInit(){

    

}

//导入ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.css']
})export class NewsComponent implements OnInit {constructor() { }//声明dom赋值给一个变量@ViewChild('new01') new01:any;ngOnInit(): void {}ngAfterViewInit(){console.log(this.new01);
//操作dom,this.new01.nativeElement.innerHTML='我是被view child操作的';}}

 

 

同样可以使用ViewChild操作子组件

 

组件html

<div #new01 id='new01' *ngIf="true">我是一个dom节点。
</div><br><br>
<!--给组件命名-->
<app-header #header></app-header>
<br><br>
<!--调用组件方法，内部执行子组件的方法-->
<button (click)="getChild()">改变header组件内容</button>

组件ts

//导入ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.css']
})export class NewsComponent implements OnInit {constructor() { }
//声明ViewChild，赋给一个变量@ViewChild('new01') new01:any;@ViewChild('header') header:any;ngOnInit(): void {}ngAfterViewInit(){console.log(this.new01);this.new01.nativeElement.innerHTML='我是被view child操作的';}childInfo:string;getChild(){//执行子组件的方法this.header.run();//访问子组件的ViewChild变量console.log(this.header.header_div);}
}

 

子组件html

<div #header_div>我是new组件的子组件header里面的dom元素.
</div>

子组件ts

import { Component, OnInit ,ViewChild} from '@angular/core';@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {constructor() { }//声明使用@ViewChild('header_div') header_div :any;ngOnInit(): void {}run(){console.log("我是header组件的run(),我被执行了"+this.header_div.nativeElement);this.header_div.nativeElement.style.color='green';this.header_div.nativeElement.style.fontSize='30px';}
}

 

 

点击之前

点击按钮之后