1.dom操作的方式@viewChild

（1）使用原生js

（2）使用@viewChild装饰器

注意：基本类似于ref

ViewChild获取dom节点：
    1、模板中给dom起一个名字
      <div #myBox>
        我是一个dom节点
      </div>
	  注意：<div #myBox> 是 Angular 模板中专门的一种语法，用于定义一个模板引用变量
      
    2、在业务逻辑里面引入ViewChild函数
    import { Component, OnInit, ViewChild } from '@angular/core';

    3、 写在类里面
    @ViewChild('myBox') myBox:any; //这样就直接获取到dom对象了，相当于是ref的感觉

    4、ngAfterViewInit生命周期函数里面获取dom
    this.myBox.nativeElement

使用示例：

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

<div #myBox>
  我是一个dom节点
</div>

<button (click)="getChildRun()">获取子组件的方法</button>

  @ViewChild('myBox') myBox: any;

  //获取一个组件
  @ViewChild('header') header: any;


  ngAfterViewInit(): void {
    console.log(this.myBox.nativeElement);

    this.myBox.nativeElement.style.width = '100px';

    this.myBox.nativeElement.style.height = '100px';

    this.myBox.nativeElement.style.background = 'red';

    console.log(this.myBox.nativeElement.innerHTML);
  }

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

2.dom操作的合适时机

<div id="box">
    this is box
</div>
<br>
<div id="box1" *ngIf="flag">
    this is box1 
</div>

export class HomeComponent implements OnInit {

  public flag:boolean=true;

  constructor() { }

  ngOnInit() {
      //组件和指令初始化完成，并不是真正的dom加载完成
      let oBox:any=document.getElementById('box');

      console.log(oBox.innerHTML);
      oBox.style.color="red";

      //获取不到dom节点（因为box1是通过*ngIf进行条件渲染的）
      /*
       let oBox1:any=document.getElementById('box1');

       console.log(oBox1.innerHTML);
       oBox1.style.color="blue";
      */
  }
  
  //视图加载完成以后触发的方法    dom加载完成  （建议把dom操作放在这个里面）  
  ngAfterViewInit(){
       let oBox1:any=document.getElementById('box1');
       console.log(oBox1.innerHTML);
       oBox1.style.color="blue";

  }

}

总结

（1）ngOnInit钩子是组件和指令初始化完成，并不是所有的dom都加载完成！所以不建议在这里面操作dom！

可以获取直接定义好的dom，但是通过*ngIf进行条件渲染的dom，在ngOnInit钩子里面获取不到

（2）ngAfterViewInit钩子是dom全部加载完成之后

在这里可以操作所有的dom！

3.案例：侧边栏弹出与收回

<div class="content">
  内容区域
  <button (click)="showAside()">弹出侧边栏</button>
  <button (click)="hideAside()">隐藏侧边栏</button>
</div>

<aside id="aside">
  这是一个侧边栏
</aside>

#aside{
  width: 200px;
  height: 100%;
  position: absolute;
  right: 0px;
  top:0px;
  background: #000;
  color:#fff;
  transform: translate(100%,0); //第一个参数是x轴，第二个是y轴
  transition: all 2s;
}

export class TransitionComponent implements OnInit {

  showAside(){
     //原生js获取dom节点
     var asideDom:any=document.getElementById('aside');
     asideDom.style.transform="translate(0,0)";
  }
  hideAside(){
    //原生js获取dom节点
    var asideDom:any=document.getElementById('aside');
    asideDom.style.transform="translate(100%,0)";
  }
}