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)';
}
}