本篇文章给大家介绍一下angular中的dom操作。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《angular教程》
一、 Angular 中的 Dom 操作以及@ViewChild、 Angular 执行 css3 动画
1.1 原生js的 dom 操作以及动画
演示组件：appcomponentsransition
HTML
内容区域
this is box
this is box1
登录后复制
组件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 Angular 中的 dom 操作（ViewChild）
ViewChild：属性装饰器
演示文件：gDemosrcppcomponentsews
1、现在组件模板文件定义属性 ，通过#
我是一个dom节点
登录后复制
2、现在组件ts通过ViewChild 获取dom
我是一个dom节点
登录后复制
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 引入 // 子组件 header// 父组件 得到 子组件的 数据 和 方法 --- 子组件 传 值给父组件 // 总结：// 1. 父组件中调用子组件的时候， 给子组件一个名称// // 2. 在父组件引入viewChild// import { Component, OnInit,ViewChild } from '@angular/core';// @ViewChild('header')// public header:any;// 3. 已经可以在父组件调用子组件的属性和方法了// 父组件传值给子组件 @input -- 子组件 得到 父组件的 数据 和 方法 // 父组件： home// 子组件： header
登录后复制
更多编程相关知识，请访问：编程入门！！
以上就是浅谈Angular中的DOM操作的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2717124.html
