Angular 16中首次加载时getBoundingClientRect()获取的height值异常过大的问题

看起来你遇到的是首次页面加载时，元素还没完全渲染稳定就获取尺寸导致的异常问题——这种情况很常见，通常是因为浏览器还没完成元素内所有内容的布局，就执行了你的尺寸获取逻辑。我给你几个针对性的解决思路：

• 用requestAnimationFrame替代setTimeout
  你当前用的setTimeout没有指定延迟时间，它的执行时机是不确定的，可能在浏览器完成元素重绘前就跑了。换成requestAnimationFrame能确保在浏览器下一次重绘前执行尺寸获取，时机更准确：

  ngOnInit(): void {
    requestAnimationFrame(() => {
      this.getScreenSize();
    });
  }
  

• 把初始尺寸获取移到ngAfterViewInit中
  ngOnInit阶段视图还处于初始化早期，可能元素的布局还没完全确定。而ngAfterViewInit是Angular确认视图初始化完成后的钩子，在这里执行初始尺寸获取会更可靠，还能去掉ngOnInit里的定时器代码：

  ngAfterViewInit(): void {
    // 先获取一次初始尺寸
    this.getScreenSize();
    // 再监听窗口resize事件
    fromEvent(window, 'resize')
      .pipe(
        takeUntil(this.autoUnsubscribeDirective.destroyNotifier$)
      )
      .subscribe(() => this.getScreenSize());
  }
  

• 处理元素内的异步加载内容
  如果你的指令绑定的元素里包含图片、或者从API加载的动态内容，这些内容加载完成前，浏览器会用临时占位高度，加载完成后才会收缩到实际高度。这种情况下需要额外监听：

  • 对于图片：可以遍历元素内的所有<img>标签，给它们添加load事件监听，等所有图片加载完成后再调用getScreenSize。
  • 对于异步数据：在数据订阅完成、视图更新后，手动触发一次getScreenSize（可以配合ngAfterViewChecked，但要加个标记避免无限循环）。

• 用Angular CDK的Layout模块辅助监听
  Angular CDK的Layout模块提供了更专业的视图尺寸监听能力，能自动处理视图变化的场景，比自己监听resize更稳定：

  import { BreakpointObserver } from '@angular/cdk/layout';
  
  constructor(
    private elRef: ElementRef,
    private autoUnsubscribeDirective: AutoUnsubscribeDirective,
    private breakpointObserver: BreakpointObserver
  ) {}
  
  ngAfterViewInit(): void {
    // 监听视图变化
    this.breakpointObserver.observe('*')
      .pipe(
        takeUntil(this.autoUnsubscribeDirective.destroyNotifier$)
      )
      .subscribe(() => this.getScreenSize());
    // 初始执行一次
    this.getScreenSize();
  }
  

优先试试前两种方法，大部分情况下就能解决问题；如果是异步内容导致的，再结合第三种方案调整。

备注：内容来源于stack exchange，提问作者ShanRon