最近碰到一个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

问题找到了，但是没有解决，很郁闷！

• 如果子组件的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'));
  }
}