5 Angular 中的 Dom 操作

5.1 原生dom 操作

注意：动态渲染的dom 在ngOnInit()获取不到，在这个生命周期里面，组件和指令初始化完成 并不是真正的dom加载完成，要在ngAfterViewInit()执行

ngAfterViewInit(){
       let oBox1:any=document.getElementById('box1');
       console.log(oBox1.innerHTML);
       oBox1.style.color="blue";

  }

5.2 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
5. this.myBox.nativeElement.style.width='100px';
   5.3 获取子组件里面的方法
   引入：

<app-header #header></app-header>

子组件定义值
同上引用ViewChild
父组件调用

getChildRun(){
     //调用子组件里面的方法
    this.header.run();
    // 调用子组件里面的值
    alert(this.header.msg)
}