每次讲angular中的特性的时候总是习惯性地拿他和vue进行比较。
vue中获取dom元素的方法 有两种
1.通过js原生获取
如果你想提取获取dom元素的话，有个条件是你得在 mounted 挂载之后的生命周期钩子函数中 进行调用 document.getElementById();document.querySelector();
2. 就是 vue自带的 ref 给需要dom元素上加一个 ref=“自定义名称” 然后 通过 this.$refs.自定义名称就可以获取到了
好了 复习完 vue的东西 今天就来不如正题 在 angular中获取dom元素
大体上和vue类似哈
// 现在组建的html文件中 书写 一个div元素
<div class="box">hello world</div>
然后我们就来获取一下哈
1.通过原生js
首先也是 在一个 dom元素加载完的 一个生命周期钩子函数中使用原生js的方式获取
这个钩子函数叫做
ngAfterViewInit()； // 使用这个方法 之前要做一些准备的哈
// 引入 AfterViewInitimport {Component, OnInit, AfterViewInit } from '@angular/core';// 要实现 implements AfterViewInit 默认是没有export class FormsComponent implements OnInit, AfterViewInit{ngAfterViewInit(): void {const oBox: any = document.querySelector('.box');console.log(oBox);}}
最后也确实获取到了哈
2。通过angular自带的 ViewChild 方式获取
还是获取下 上面的那个 元素
不过在html上要有点变化了 不再使我们传统上的 id和class了
<div #box>hello world</div>
然后还是先引入这个 东西 ViewChild
import {Component, OnInit, ViewChild } from '@angular/core';export class FormsComponent implements OnInit, AfterViewInit {constructor() {}@ViewChild('box') box: any;// ViewChild 装饰器里面的就是之前我们自定义的那个boxngOnInit(): void {}ngAfterViewInit(): void {console.log(this.box.nativeElement);}}
照样获取到了
