Angular笔记 ViewChild获取dom节点

1.引入ViewChild。
2.声明属性。
3.调用。

注：取值用
@ViewChild('box1',null) box1:any;
获取整个组件，可以父子传值。

代码如下

html中声明

<div #box1> this is a box named 'box1'.</div>

ts中获取

import { Component, OnInit,ViewChild } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})

export class HeaderComponent implements OnInit {

/*

ViewChild获取dom节点
    1、模板中给dom起一个名字
      <div #myBox>
        我是一个dom节点
      </div>
    2、在业务逻辑里面引入ViewChild
    import { Component, OnInit,ViewChild} from '@angular/core';
    3、 写在类里面    @ViewChild('myBox') myBox:any;
    4、ngAfterViewInit生命周期函数里面获取dom
    this.myBox.nativeElement
*/

@ViewChild('box1',null) box1:any;


  constructor() { }


  // angular 加载完成
  // 每次页面刷新都会调用
  ngOnInit() {
  }

  //dom 加载完成
  ngAfterViewInit(): void {
    
    let box1:any = this.box1.nativeElement;
    box1.style.background="red";
    
  }

}