赞
踩
0Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)
〇、复习 JavaScript 的 dom是什么
一、Angular中通过原生JS获取Dom 生命周期函数介绍
二、Angular 中通过 ViewChild获取DOM节点
三、父组件通过ViewChild获取子组件的实例一个
四、Angualr中调用CSS3动画实现侧边栏动画效果
, 等。它们是构建网页结构的基本单元。 文本节点(Text Node):包含元素内的文本。例如,在
Hello
中,"Hello" 是一个文本节点。 属性节点(Attribute Node):表示元素的属性,如 class, id, style 等。 注释节点(Comment Node):包含文档的注释。 DOM 加载完成 当我们说 "DOM加载完成" 时,通常是指整个网页的HTML被完全加载和解析成DOM树的状态。在这个阶段,所有的HTML元素都已经加载完毕,可以被JavaScript脚本访问和修改。 这里是一些基本概念和常用操作:。一、Angular中通过原生JS获取Dom 生命周期函数介绍
<div> <h3>我是一个home组件 Dom操作演示</h3> </div> <div id="box">俺 是一个id 为box</div> <p>true</p> <div id="box1" *ngIf="flag"> this is a id="box1" element </div> <hr /> <div> <p>flase</p> <div id="box1" *ngIf ="!flag"> this is a id="box1" element </div> </div>
h4 {
text-align: center;
color: #fff;
background: #000;
}
ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], }) export class HomeComponent implements OnInit { public flag: boolean = false; ngOnInit(): void { // 组件和指令初始化完成 并非真正的dom加载完成 //注意 在通过dom获取 元素的节点时 变量要声明类型 let oBox: any = document.getElementById(`box`); console.log(oBox?.innerHTML); oBox.style.color = 'red'; // } //在生命周期函数中获取有 ng命令的 元素的dom节点 来操作元素 ngAfterContentInit(): void { //Called after ngOnInit when the component's or directive's content has been initialized. //Add 'implements AfterContentInit' to the class. } ngAfterViewInit() { let oBox1: any = document.getElementById('box1'); console.log(oBox1.innerHTML); oBox1.style.color = 'blue'; } }
二、Angular 中通过 ViewChild获取DOM节点
<div class="content">
<div>
<button (click)="showAside()">弹出侧边栏</button>
</div>
<div>
<button (click)="hideAside()">隐藏侧边栏</button>
</div>
</div>
<aside id="aside">
这是一个侧边栏
</aside>
css
#aside { width: 200px; height: 100%; text-align: center; font-size: 700; position: absolute; right: 0px; top: 0px; background: orange; color: #fff; transform: translate(100%, 0); transition: all 2s; } button { width: 200px; height: 40px; color: navy; line-height: 40px; font-weight: 700; margin-left: 40%; border: 1px solid #fff; border-radius: 10px; background-color: skyBlue; margin-top: 10px; }
ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-transtion', templateUrl: './transtion.component.html', styleUrls: ['./transtion.component.css'], }) export class TranstionComponent implements OnInit { structor() {} ngOnInit() {} 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)'; } }
获取子组件的实例一个
子组件header
ts
import { Component } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent { run(){ alert("我是header里面ts的 run方法" ); } }
父组件
<div>
<app-header #header> </app-header>
<button (click)="getChildRun()">点击我调用子组件里面的run方法</button>
</div>
import { Component,OnInit,ViewChild} from '@angular/core'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.scss'] }) export class NewsComponent implements OnInit{ ngOnInit(): void { throw new Error('Method not implemented.'); } @ViewChild('header') myheader:any; getChildRun(){ this.myheader.run(); } }
transtion.component.html
<div class="content">
<div>
<button (click)="showAside()">弹出侧边栏</button>
</div>
<div>
<button (click)="hideAside()">隐藏侧边栏</button>
</div>
</div>
<aside id="aside">
这是一个侧边栏
</aside>
transtion.component.css
#aside { width: 200px; /* 设置宽度为 200 像素 */ height: 100%; /* 设置高度为父元素的 100%,即充满整个父元素的高度 */ text-align: center; /* 文本居中对齐 */ font-size: 700; /* 字体大小设置为 700,这个值异常大,可能是一个错误 */ position: absolute; /* 绝对定位,相对于最近的已定位的祖先元素定位 */ right: 0px; /* 距离父元素右侧 0 像素 */ top: 0px; /* 距离父元素顶部 0 像素 */ background: orange; /* 背景颜色设置为橙色 */ color: #fff; /* 文本颜色为白色 */ transform: translate(100%, 0); /* 水平方向上移动自身宽度的 100%,使其在视觉上完全从屏幕右侧移出 */ transition: all 2s; /* 为所有属性变化设置 2 秒的过渡效果 */ }
styles.scss 全局样式
/* You can add global styles to this file, and also import other style files */ *{ margin: 0px; padding: 0px; } ul,ol{ list-style-type: none; } /* You can add global styles to this file, and also import other style files */ body { width: 100%; // 这个声明设置 body 元素的宽度为视口(viewport)宽度的 100%。视口是用户网页可见区域的大小。 // 这通常用于确保 body 元素占满整个水平空间,尤其是在响应式设计中,以适应不同大小的屏幕。 overflow-x: hidden; // 这个声明用于控制 body 元素水平方向上的溢出内容。 // hidden 的值意味着如果 body 的内容超出了其宽度范围,这部分溢出的内容将不会显示,也不会出现水平滚动条。 }
transtion.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-transtion', templateUrl: './transtion.component.html', styleUrls: ['./transtion.component.css'], }) export class TranstionComponent implements OnInit { structor() {} ngOnInit() {} 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)'; } }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。