详解angular中如何监控dom渲染完毕

在Angular中，监控DOM渲染完毕可以使用ngAfterViewInit生命周期钩子函数。

ngAfterViewInit会在组件的视图初始化完成后被调用。在该函数中可以使用setTimeout函数来等待DOM渲染完毕后再执行一些操作，例如获取DOM元素的尺寸或位置信息。

以下是一个简单的示例代码，演示了如何使用ngAfterViewInit监控DOM渲染完毕：

import { Component, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div #myDiv>Hello World</div>',
})
export class AppComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    setTimeout(() => {
      const { offsetWidth, offsetHeight } = this.elementRef.nativeElement.querySelector('#myDiv');
      console.log(`My div dimensions: ${offsetWidth} x ${offsetHeight}`);
    });
  }
}

在上面的示例中，组件模板中包含了一个<div>元素，并且使用#myDiv语法定义了一个指令变量myDiv。在组件的构造函数中注入了ElementRef依赖，该依赖可以用来获取DOM元素引用。

在ngAfterViewInit函数中，我们使用了setTimeout函数来等待一次JavaScript事件循环，以确保DOM渲染完成。然后，我们使用ElementRef.nativeElement属性获取到DOM元素的引用，再使用querySelector方法获取到指定的<div>元素，最后获取它的尺寸信息并打印到控制台中。

除了使用setTimeout函数，也可以使用Renderer2服务来监控DOM渲染完毕。以下是另一个示例代码：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div #myDiv>Hello World</div>',
})
export class AppComponent {
  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  ngAfterViewInit(): void {
    this.renderer.listen('window', 'load', () => {
      const { offsetWidth, offsetHeight } = this.elementRef.nativeElement.querySelector('#myDiv');
      console.log(`My div dimensions: ${offsetWidth} x ${offsetHeight}`);
    });
  }
}

在上面的示例中，我们注入了Renderer2服务，并使用listen方法监听了window对象的load事件，在回调函数中获取到了<div>元素的引用，并打印了它的尺寸信息。

总之，在Angular中监控DOM渲染完毕有多种方法可选，可以根据具体情况选择最适合自己的方式。