場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

然后新建一個slide組件,在組件的html中添加一個div并添加id屬性

<div id="myBox">這是一個div </div>

原生JS獲取dom

然后在對應的ts中添加聲明周期方法ngAfterViewInit()

不能在ngOnInit()方法中獲取dom

? ngAfterViewInit(): void {//原生js獲取domlet mybox:any = document.getElementById('myBox');console.log(mybox);mybox.style.background = 'red';}

效果

?

使用ViewChild獲取dom

首先在組件的html中新增一個div 并通過#提添加id

<div #myBox2>這是一個div--myBox2 </div>

然后在此組件對應的ts中引入ViewChild

import { Component, OnInit,ViewChild } from '@angular/core' ;

并且通過

@ViewChild('myBox2') myBox:any;

獲取dom元素

其中myBox2要與html的id屬性相對應，后面的myBox自己定義。

然后在ngAfterViewInit()生命函數中

?? ngAfterViewInit(): void {//通過viewChild獲取domthis.myBox.nativeElement.style.color = "red";}

?

效果

?

總結

以上是生活随笔為你收集整理的Angualr中通过原生js和ViewChild的方式获取dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。