angular中获取dom元素

每次讲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()； // 使用这个方法 之前要做一些准备的哈

//  引入 AfterViewInit
import { 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 装饰器里面的就是之前我们自定义的那个box
  ngOnInit(): void {
  }
  ngAfterViewInit(): void {
    console.log(this.box.nativeElement);
  }
}

照样获取到了