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

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文档中的元素，如

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