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

照樣獲取到了