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还有很多属性,平移,旋转等,需要的话可以去查