相关推荐：《angular教程》
一、 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>
组件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：属性装饰器
演示文件：\ngdemo\src\app\components\news
1、现在组件模板文件定义属性 ，通过#
<div #mybox> 我是一个dom节点</div>
2、现在组件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>
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
更多编程相关知识，请访问：编程入门！！
以上就是浅谈angular中的dom操作的详细内容。