angular基础——dom操作

一.dom操作

1.使用原生js

  // ng组件初始化结束后调用，可在里面获取dom节点
  ngAfterViewInit(){
    原生js操作dom节点
    let divDom:any=document.getElementById("mybox");
    console.log(divDom.innerHTML);
    divDom.style.color="red";
  }

2.ViewChild
ViewChild不仅能获取组件中的dom元素，还能获取子组件的对象，从而调用子组件中的方法

<h1>这是一个组件</h1>
<!-- ts中可通过#后的名字获取dom节点 -->
<div #myDiv id="mybox">
    这是一个dom节点
</div>

<!-- 这是一个子组件 -->
<app-sub-component #subComponent></app-sub-component>

// 首先在组件中引入ViewChild
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-get-dom',
  templateUrl: './get-dom.component.html',
  styleUrls: ['./get-dom.component.css']
})
export class GetDomComponent implements OnInit {
  // 获取组件中的dom节点，并赋值给nyDiv，angular8中需要加{static:true}
  @ViewChild("myDiv",{static:true}) myDiv:any;
  // 获取子组件对象并赋值给subComponent
  @ViewChild("subComponent") subComponent:any;

  constructor() { }

  ngOnInit() {
  }

  // ng组件初始化结束后调用，可在里面获取dom节点
  ngAfterViewInit(){
    // 获取到dom节点
    console.log(this.myDiv.nativeElement);
    this.myDiv.nativeElement.style.width="100px";
    this.myDiv.nativeElement.style.height="100px";
    this.myDiv.nativeElement.style.background="yellow";
    console.log(this.myDiv.nativeElement.innerHTML);
    // 调用子组件中的方法
    this.subComponent.run();
  }
}

3.demo：侧边栏的隐藏和显示

<h1>演示侧边栏的弹出</h1>

<button (click)="showAside()" id="btn">弹出侧边栏</button>

<aside id="aside">
    这是一个侧边栏
</aside>

aside{
    background: #000;
    color: #fff;
    width: 10%;
    height: 100%;
    right: 0;      /* right,top和position使aside标签显示在右侧 */
    top: 0;
    position: absolute;
    transform: translate(100%,0);        /* 使aside标签向右移动100% */
    transition: all 1s;    /* 所有移动效果在1s完成 */
}

/* 这个定义在公共的css文件中：styles.css */
body{
    width: 100%;
    overflow-x: hidden;
}

export class TransitionComponent implements OnInit {
  public isShow:boolean=false;  // 标记侧边栏的显示与隐藏
  constructor() { }

  ngOnInit() {
  }

  showAside(){
    var asideDom:any=document.getElementById("aside");
    var btnDom:any=document.getElementById("btn");
    if(this.isShow){
      asideDom.style.transform="translate(100%,0)";
      btnDom.innerHTML="显示侧边栏";
    }else{
      asideDom.style.transform="translate(0,0)";
      btnDom.innerHTML="隐藏侧边栏";
    }
    this.isShow=!this.isShow;
  }
}

参考：https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418