(精华)2020年8月4日 Angular DOM操作
【摘要】
一、 Angular 中的 Dom 操作以及@ViewChild、 Angular 执行 css3 动画
1.1 原生js的 dom 操作以及动画
演示组件:app\components\transi...
一、 Angular 中的 Dom 操作以及@ViewChild、 Angular 执行 css3 动画
1.1 原生js的 dom 操作以及动画
演示组件:app\components\transition
HTML
<div class="content">
<p>内容区域</p>
<div id="box">
this is box
</div>
<br>
<div id="box1" *ngIf="flag">
this is box1
</div>
<button (click)="showAside()">弹出侧边栏</button>
<button (click)="hideAside()">隐藏侧边栏</button>
</div>
<aside id="aside">
这是一个侧边栏
</aside>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
组件ts:
public flag:boolean=true;
constructor() { }
ngOnInit(): void {
//组件和指令初始化完成 并不是真正的dom加载完成
let oBox:any=document.getElementById('box');
console.log(oBox.innerHTML);
oBox.style.color="red";
//获取不到dom节点
/*
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";
}
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)";
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
1.2 Angular 中的 dom 操作(ViewChild)
ViewChild:属性装饰器
演示文件:\ngDemo\src\app\components\news
- 现在组件模板文件定义属性 ,通过#
<div #myBox>
我是一个dom节点
</div>
- 1
- 2
- 3
- 现在组件ts通过ViewChild 获取dom
<div #myBox>我是一个dom节点</div>
<app-header #header></app-header>
<button type="button" (click)='getChildProp()'>获取子组件header的属性</button>
<button type="button" (click)='getChildMethod()'>获取子组件header的方法</button>
- 1
- 2
- 3
- 4
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
//获取Dom
@ViewChild('myBox')
public myBoxIn: any;
@ViewChild('header')
public header: any;
constructor() { }
ngOnInit(): void {
// console.log(this.myBoxIn)
}
//处理dom节点
ngAfterViewInit() {
console.log(this.myBoxIn.nativeElement)
//父组件获取到了整个子组件header
console.log('父组件获取到了整个子组件header')
console.log(this.header)
}
//获取子组件header的属性
getChildProp() {
console.log(this.header.title)
}
//获取子组件header的方法
getChildMethod() {
console.log(this.header.headRun)
this.header.headRun();
}
}
// 父组件 news 引入 <app-header #header></app-header>
// 子组件 header
// 父组件 得到 子组件的 数据 和 方法 --- 子组件 传 值给父组件
// 总结:
// 1. 父组件中调用子组件的时候, 给子组件一个名称
// <app-header #header></app-header>
// 2. 在父组件引入viewChild
// import { Component, OnInit,ViewChild } from '@angular/core';
// @ViewChild('header')
// public header:any;
// 3. 已经可以在父组件调用子组件的属性和方法了
// 父组件传值给子组件 @input -- 子组件 得到 父组件的 数据 和 方法
// 父组件: home
// 子组件: header
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 1
文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。
原文链接:codeboy.blog.csdn.net/article/details/107801994
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)