美文网首页
无法在ngAfterViewInit之后获取到DOM元素

无法在ngAfterViewInit之后获取到DOM元素

作者: 天降男神 | 来源:发表于2019-05-07 11:47 被阅读0次

最近碰到一个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'));
  }
}

相关文章

  • 无法在ngAfterViewInit之后获取到DOM元素

    最近碰到一个Angular中无法获取DOM进行实例化的问题:记录一下 项目使用Project Clarity框架,...

  • 02-JQuery操作DOM

    一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象,而Jquery获...

  • react ref获取真实dom

    之前一直用ref获取,没觉得有什么问题,但是获取封装的组件获取到的却是React对象,而不是dom元素。 ref获...

  • 元素对象和选择器

    html dom树 通过获取dom节点的方法获取到 元素对象 还能通过console.dir(元素对象) 打印出元...

  • 使用ref获取DOM元素和组件

    一、获取DOM元素虽然可以通过原生js操作获取到DOM元素,但是Vue等框架已经不推荐自己操作DOM了,都扔给框架...

  • 关于vue mounted钩子里能不能获取dom的问题

    大家都知道mounted声明周期是发生在dom挂载完成之后,所以理论上是可以获取到dom元素的 但是有一些特殊情况...

  • (十)React 中 ref 的使用及坑

    帮助我们在 React 中获取DOM元素 在React 里面,可以用 e.target 获取到事件对应的元素,也可...

  • 重绘(repaint)与回流(重排 reflow)

    页面呈现流程 浏览器会将获取到的HTML代码解析成一个DOM树(包括display: none的元素) 在DOM树...

  • 十月第二周学习笔记

    DOM 节点 元素子节点只检索第一层 子节点获元素的子节点数组oDiv.childNodes获元素的子元素节点数组...

  • vue小点

    1.获取dom元素 通过设置ref: 获取到元素并改变样式: this.$refs.budget.style.tr...

网友评论

      本文标题:无法在ngAfterViewInit之后获取到DOM元素

      本文链接:https://www.haomeiwen.com/subject/lqceoqtx.html