Angular中的Dom操作以及@ViewChild

1.Angular 中的 dom 操作（原生 js）

ngAfterViewInit(){ 
var boxDom:any=document.getElementById('box'); 
boxDom.style.color='red'; }

2.Angular 中的 dom 操作（ViewChild）

/*
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

*/

三、父子组件中通过 ViewChild 调用子组件的方法

1.调用子组件给子组件定义一个名称 
<app-footer #footerChild></app-footer>

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

3. ViewChild 和刚才的子组件关联起来 @ViewChild('footerChild') footer;

4.调用子组件 run(){this.footer.footerRun(); }