【angular教程240108】05 js的DOM与 @ViewChild获取DOM节点和子组件的实例、调用css3动画(侧边栏 actionSheet)

2024-01-09 14:33:55

Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)

0Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)

〇、复习 JavaScript 的 dom是什么
一、Angular中通过原生JS获取Dom 生命周期函数介绍
二、Angular 中通过 ViewChild获取DOM节点
三、父组件通过ViewChild获取子组件的实例一个
四、Angualr中调用CSS3动画实现侧边栏动画效果

〇,复习

JavaScript 的 dom是什么

在 JavaScript 中,DOM(Document Object Model)是一种编程接口,用于HTML和XML文档。它提供了一种将文档结构化为树形结构的方法,其中每个节点都是文档的一部分,例如一个元素、文本或属性。通过 JavaScript 和 DOM,你可以创建、修改、删除或重新排列文档结构中的元素。 。 DOM 节点 在文档对象模型(DOM)中,"节点"(Node)是组成文档的基本单元。一个节点可以是以下任何一种类型: 元素节点(Element Node):表示HTML或XML文档中的元素,如
,

, 等。它们是构建网页结构的基本单元。 文本节点(Text Node):包含元素内的文本。例如,在

Hello

中,"Hello" 是一个文本节点。 属性节点(Attribute Node):表示元素的属性,如 class, id, style 等。 注释节点(Comment Node):包含文档的注释。 DOM 加载完成 当我们说 "DOM加载完成" 时,通常是指整个网页的HTML被完全加载和解析成DOM树的状态。在这个阶段,所有的HTML元素都已经加载完毕,可以被JavaScript脚本访问和修改。 这里是一些基本概念和常用操作:。
  1. 文档和节点:。
    文档(Document)代表整个HTML页面,是DOM树的根节点。
    节点(Node)是DOM树中的每个对象。它可以是元素(Element)、文本(Text)、注释等。
  2. 选择元素:。
    document.getElementById(id):根据ID选择一个元素。
    document.getElementsByTagName(name):选择具有指定标签名的所有元素。
    document.getElementsByClassName(name):选择具有指定类名的所有元素。
    document.querySelector(selector):使用CSS选择器选择第一个匹配的元素。
    document.querySelectorAll(selector):使用CSS选择器选择所有匹配的元素。
  3. 操作元素:。
    更改元素的内容:element.innerHTML = ‘新内容’。
    更改元素的样式:element.style.color = ‘red’。
    创建新元素:document.createElement(tagName)。
    添加元素:parentElement.appendChild(childElement)。
    移除元素:parentElement.removeChild(childElement)。
  4. 事件处理:。
    给元素添加事件处理器:element.addEventListener(event, function)。
    移除事件处理器:element.removeEventListener(event, function)。
一、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)';
  }



}

三、父组件通过ViewChil

获取子组件的实例一个

子组件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();
 }


}

四、Angualr中调用CSS3动画实现侧边栏动画效果

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

文章来源:https://blog.csdn.net/qq_53433382/article/details/135477180
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。