一.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是一个选择器，用来在类中引用模板中的视图节点，可以是angular组件，也可以是HTML元素，推荐使用Renderer2操作dom元素，在ngAfterViewInit中可以安全使用@ViewChild引用的元素

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

<h1>这是一个组件</h1>
<!-- ts中可通过#后的名字获取dom节点 -->
<div class="image-slider" #imageSlider><img #img *ngFor="let slider of sliders" [src]="slider.imgUrl" [alt]="slider.caption">
</div><!-- 这是一个子组件 -->
<app-sub-component #subComponent></app-sub-component>

import { Component, OnInit, Input, ViewChild, ElementRef, ViewChildren, QueryList, Renderer2 } from '@angular/core';export interface ImageSlider {imgUrl: string;link: string;// 显示在图片上的文字caption: string;
}export class ImageSliderComponent implements OnInit {@Input() sliders: ImageSlider[] = [];// 获取dom元素，static表示元素是否为动态生成的(ngfor或ngif产生的)// 得到的是一个包装对象，对象里面的nativeElement指向dom元素@ViewChild('imageSlider', {static: true}) imgSlider: ElementRef;// 获取一组命名为img的模板@ViewChildren('img') imgs: QueryList<ElementRef>;// 注入操作dom元素的对象constructor(private rd2: Renderer2) { }ngOnInit() {console.log(this.imgSlider);}ngAfterViewInit(): void {// 在此方法中可以安全的获取dom元素console.log(this.imgs);// 不建议直接操作dom元素，可能会被恶意攻击// (比如如果有功能允许用户输入html片段，直接操作dom元素不会对用户输入进行检查)// this.imgs.forEach(item => item.nativeElement.style.height='100px')// 通过Renderer2对象操作dom元素this.imgs.forEach(item => {this.rd2.setStyle(item.nativeElement, 'height', '100px')})}
}

3.在父组件中获取子组件对象

  // 通过给子组件命名获取：#imgSlider// @ViewChild('imgSlider', {static: false}) imgSlider: ImageSliderComponent;// 直接通过组件获取，获取到的对象包含子组件中所有的属性和方法@ViewChild(ImageSliderComponent, {static:true}) imgSlider: ImageSliderComponent;

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