1：ngAfterViewInit
通过原生JS获取dom都是在dom加载完成后获取，Angular中也一样，那么Angular中在哪里获取呢？应该在
ngAfterViewInit里操作，关于详细信息可以看官方文档Angular生命周期函数，在ngOnInit里获取有时会失败的，不妨测试一下。
创建好项目后，添加home组件，home前台：
<h2>演示dom操作</h2>
<h4>1:通过原生js操作dom</h4>
<p class="blue">1)不要在ngOnInit里获取dom</p>
<div id="div1">
我是div1
</div>
<div id="div2" *ngIf="flag">
我是div2，有指令后在ngOnInit里获取不到dom节点
</div>
home后台的ngOnInit:
//ngOnInit里只是组件和指令初始化完成，并不是真正的dom加载完成
ngOnInit() {
let d1 = document.getElementById("div1");
let d2 = document.getElementById("div2");
d1.style.color = "gray";
d2.style.border = "solid red 1px";
}
然后看一下效果：
可以看到是获取不到的，获取dom时，注意要在ngAfterViewInit方法里获取，该方法是视图加载完成后触发的方法。在html加入
<p class="blue">2)在ngAgterViewInit里获取dom</p>
<div id="div3">
我是div3
</div>
<div id="div4" *ngIf="flag">
我是div4
</div>
<hr />
然后在后台ngAfterViewInit方法里：
//视图加载完成后触发此方法，在这里可以获取到dom
ngAfterViewInit() {
let d3 = document.getElementById("div3");
let d4 = document.getElementById("div4");
d3.style.color = "gray";
d4.style.border = "solid red 1px"；
}
然后看看效果：
2：通过ViewChild获取dom
Angualr中就是通过ViewChild获取dom的，首先，给dom起名字：
<h4>2通过ViewChild操作dom</h4>
<div #div5>
我是div5
</div>
<hr />
然后，在home.component.ts里引入ViewChild（有的IDE当你敲ViewChild时会自动引入）
引入前：
import { Component, OnInit} from '@angular/core';
引入后：
import { Component, OnInit,ViewChild } from '@angular/core';
然后在OnInit里：
@ViewChild("div5", { static: true }) d5: any;//获取dom
本来按照视频写的是 @ViewChild(‘div5’) d5: any;但是报错，IDE提示需要两个参数，然后就搜最后就按上面的写了，相当于把获取到的节点赋值给d5，然后就可以在ngAfterViewInit里操作dom节点了
this.d5.nativeElement.style.color = "orange";
//如果不知道通过Angular获取dom怎么设置style，可以直接console.log(this.d5)，
//看这是个什么,有什么属性，然后就知道怎么设置style了
3：通过ViewChild获取组件
ViewChild操作dom实际上是对原生js的封装，ViewChild还可以获取组件，调用组件的方法。那么接下来就测试一下，再定义一个head组件，在home组件里引入head组件时取名：
<app-head #head></app-head>
和操作dom一样，然后@ViewChild获取到组件，然后在anAfterViewInit里就可以获取组件实例然后调用组件的方法和属性
head后台：
info: string = "我是组件head的属性";
fun() {
alert("组件head的方法")
}
然后html后台：
@ViewChild("head", { static: true }) head:any;//获取组件
//ngAfterViewInit里加入
this.head.fun();
console.log(this.head.info);
4：实现CSS3动画
定义一个transition组件，然后在transition组件里，为了看得更加清楚，定义两个div，分别是移动前后的侧边栏
<div id="sidebar0">
移动前
</div>
<div id="sidebar">
这是移动后的侧边栏
</div>
设置一下样式
#sidebar0 {
position: absolute;
width: 400px;
height: 200px;
color: aqua;
left: 70%;
top: 0;
border: 1px red dotted;
}
#sidebar {
position: absolute;
width: 400px;
height: 200px;
background-color: gray;
color: aqua;
left: 70%;
top: 0;
/*使用translate相对自身原始位置平移
transform: translate里面的两个参数分别是x和y坐标，可以用像素单位也可以用自身的百分比*/
transform: translate(0,100%);
/*表示transform移动的过程一共3s*/
transition:all 2s;
}
定义第一个按钮移动侧边栏，绑定的点击方法如下：
show() {
let d = document.getElementById("sidebar");
console.log("before:"+d.style.transform);
//注意translate(0px, 0px)这里括号里面有空格，字符串是严格匹配空格的，不像css里，可以控制台里输出d.style然后
//找到transform属性，复制过来看看
d.style.transform = (d.style.transform == "translate(0px, 0px)") ? "translate(0, 100%)" : "translate(0px, 0px)";
console.log("after:"+d.style.transform);
}
transform还有很多属性，平移，旋转等，需要的话可以去查