最近碰到一个Angular中无法获取DOM进行实例化的问题：记录一下
项目使用Project Clarity框架，父组件中包含子组件，父组件中用弹框控制子组件的显示和隐藏，当弹框显示时，ng读到父组件中的子组件，然后进行加载渲染，但是TS的执行在DOM渲染完成之后，因为我试图在ngAfterViewInit中获取DOM元素，用getElementById取到的值居然是null，而getElementsByClassName获取到对象，但是用数组方式访问时却不识别，百思不得其解
image.png
image.png
通过Debug我发现，当子组件TS执行时，父组件页面中的DOM并未加载出来，我使用定时器延迟之后就可以了，刚开始我以为是ngIf 的问题导致了这个执行顺序错误，
image.png
为了解决这个问题，我另外写了个demo，父组件控制子组件的显示，但是demo中并未出现项目中的问题，我可以在ngAfterViewInit中获取到子组件的DOM，因此我判断是Project Clarity框架的原因，他的弹框使得DOM的加载慢了一点
image.png
image.png
但是使用ElementRef可以获取到在框架中获取不到的DOM，但是因为项目逻辑问题，这个方法并不能解决我的问题
image.png
问题找到了，但是没有解决，很郁闷！
总结整理一下收获：主要是ng中获取DOM元素的方法
- 如果子组件的ID是动态由父组件传递的，在ngOnInit中获取不到DOM，因为ngOnInit在DOM渲染之前
console.log(document.getElementById(`${this.mapId}`));//null
- 使用模版引用变量配合Viewchild可以获取到DOM元素
- 使用ElementRef对象可以获取当前组件模版中DOM元素
<div *ngIf="isShow">
<app-zwf [mapId]="mapId"></app-zwf>
</div>
<button (click)="isShow=!isShow">显示zwf</button>
<div #open>
模版引用变量
</div>
import { Component, OnInit, Input, ViewChild, TemplateRef, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-zwf',
templateUrl: './zwf.component.html',
styleUrls: ['./zwf.component.css']
})
export class ZwfComponent implements OnInit, AfterViewInit {
@ViewChild('open') open: TemplateRef<any>;
@Input() mapId;
// mapId = "open";
constructor(private el: ElementRef) { }
ngOnInit() {
// console.log(this.mapId);
// console.log(document.getElementById(`${this.mapId}`));
console.log(this.open);
// console.log(this.el);
console.log(this.el.nativeElement.querySelector('.d1'));
// this.el.nativeElement.querySelector('.d1').setAttribute('id', `${this.mapId}`)
console.log(document.getElementById(`${this.mapId}`));//null
console.log(document.getElementsByClassName('d1'));
}
ngAfterViewInit() {
console.log(document.getElementById(`${this.mapId}`));
console.log(document.getElementsByClassName('d1'));
}
}
