angular dom操作ViewChild

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';
    
  }
}

 

 

点击之前

点击按钮之后