Angular 11/12读取scrollHeight报null错误及值仅为真实值1/3求解

问题1：偶尔抛出TypeError: Cannot read properties of null (reading 'scrollHeight') #

问题原因 #

• 调用setSize方法的时机早于Angular视图渲染完成的时机：如果在ngOnInit等视图未初始化完成的生命周期钩子中执行相关代码，目标DOM元素还未生成。
• 目标div[data-scroll]元素使用了*ngIf条件渲染，执行代码时判定条件未满足，元素不存在。

修复方案 #

1. 优先使用Angular提供的@ViewChild获取模板引用元素，替代原生querySelector查询，性能和准确性更高
2. 仅在ngAfterViewInit生命周期钩子触发后再执行DOM操作
3. 增加空值判断，避免空指针报错
   示例代码：

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

// 类内定义
@ViewChild('dataScroll') dataScroll!: ElementRef<HTMLDivElement>;

ngAfterViewInit() {
  // 视图初始化完成后再调用方法
  this.setSize();
}

setSize() {
  // 加空值保护
  if (!this.dataScroll?.nativeElement) return;
  document.body.style.height = `${this.dataScroll.nativeElement.scrollHeight}px`;
}

问题2：scrollHeight返回值仅为真实值的1/3 #

问题原因 #

你页面内包含8张图片，读取scrollHeight时图片尚未完成加载，此时图片仅占用极小的占位高度，等图片全部加载完成后元素才会被撑开至真实高度，提前读取的数值自然偏小。

修复方案 #

1. 等所有图片加载完成后再计算高度：监听所有图片的load事件，全部触发完成后再调用setSize更新body高度
2. 提前给图片设置占位高度：给所有图片添加aspect-ratio CSS属性，按照图片的原始宽高比提前占好位置，无需等图片加载就能拿到正确的高度
3. 也可以使用MutationObserver监听目标元素的尺寸变化，自动更新body高度，适配动态内容加载场景

示例代码（监听图片加载实现）：

ngAfterViewInit() {
  const imgs = this.dataScroll.nativeElement.querySelectorAll('img');
  const loadPromises = Array.from(imgs).map(img => {
    return new Promise(resolve => {
      if (img.complete) {
        resolve(true);
        return;
      }
      img.onload = () => resolve(true);
      img.onerror = () => resolve(true); // 加载失败也计入完成，避免阻塞
    })
  })
  // 所有图片加载完成后再设置高度
  Promise.all(loadPromises).then(() => {
    this.setSize();
  })
}

内容的提问来源于stack exchange，提问作者user11272367