如何在CSS Grid布局中可靠获取Angular组件高度？

我需要在CSS Grid布局内的Angular组件中，通过ElementRef获取组件自身高度。组件用picture标签渲染图片，受Grid布局影响组件尺寸可能很小，但会渲染适配大视口的图片，所以得靠组件实际尺寸决定加载的图片尺寸。

补充说明：Grid布局会在必要时裁剪图片，如果Grid元素是竖列形态，源图片需要保持大尺寸，但左右内容会被大量裁剪；我要针对保留图片原比例的Grid元素，限制加载大尺寸srcset。

当前遇到的问题：

• 使用AfterViewInit钩子时，通过this.elRef.nativeElement.offsetHeight获取的高度始终为0（offsetWidth能正常获取）
• 只有AfterViewChecked能拿到最终可用高度，但这个钩子会频繁调用，导致组件逻辑重复执行

尝试过的代码（可行但无法采用）：

class ImageComponent implements AfterViewChecked {
  heightSubject = new BehaviorSubject(0);
  public height$: Observable<number> = this.heightSubject.asObservable();
  constructor(public component: CmsComponentData<CmsComponent>, private elRef: ElementRef){}
  ngAfterViewChecked(): void {
    this.heightSubject.next(this.elRef.nativeElement.offsetHeight);
  }

  compData$: Observable<BannerData> = combineLatest([this.component.data$, this.height$]).pipe(
    map(([data, height] : [CmsBannerComponent, number]) => {
      if(height < 500){
        return data.smallImage;
      }
      return data.bigImage;
    })
  );
}

请问是否有可靠的方法获取此类场景下的组件尺寸？

1. 使用ResizeObserver监听尺寸变化 #

这是最推荐的方案，它能精准监听元素尺寸变化，且仅在尺寸实际改变时触发，避免AfterViewChecked的频繁调用问题。

import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

class ImageComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  heightSubject = new BehaviorSubject(0);
  public height$: Observable<number> = this.heightSubject.asObservable();

  constructor(public component: CmsComponentData<CmsComponent>, private elRef: ElementRef){}

  ngOnInit(): void {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const height = entry.contentRect.height;
        // 仅在高度实际变化时更新，避免重复触发逻辑
        if (height !== this.heightSubject.value) {
          this.heightSubject.next(height);
        }
      }
    });

    resizeObserver.observe(this.elRef.nativeElement);
    
    // 组件销毁时停止监听，防止内存泄漏
    this.destroy$.pipe(takeUntil(this.destroy$)).subscribe(() => {
      resizeObserver.disconnect();
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  compData$: Observable<BannerData> = combineLatest([this.component.data$, this.height$]).pipe(
    map(([data, height] : [CmsBannerComponent, number]) => {
      if(height < 500){
        return data.smallImage;
      }
      return data.bigImage;
    })
  );
}

2. 延迟获取高度（配合requestAnimationFrame） #

在AfterViewInit中使用requestAnimationFrame等待浏览器完成重绘后获取高度，适合尺寸不会动态变化的场景：

import { Component, ElementRef, AfterViewInit } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';

class ImageComponent implements AfterViewInit {
  heightSubject = new BehaviorSubject(0);
  public height$: Observable<number> = this.heightSubject.asObservable();

  constructor(public component: CmsComponentData<CmsComponent>, private elRef: ElementRef){}

  ngAfterViewInit(): void {
    // 等待浏览器完成当前帧渲染后获取高度
    requestAnimationFrame(() => {
      const height = this.elRef.nativeElement.offsetHeight;
      this.heightSubject.next(height);
    });
  }

  compData$: Observable<BannerData> = combineLatest([this.component.data$, this.height$]).pipe(
    map(([data, height] : [CmsBannerComponent, number]) => {
      if(height < 500){
        return data.smallImage;
      }
      return data.bigImage;
    })
  );
}

注意：如果Grid布局会动态变化（如窗口 resize、父组件布局更新），此方法仅能获取初始高度，无法响应后续变化。

3. 优化AfterViewChecked触发逻辑 #

若必须使用AfterViewChecked，可通过对比前后高度值，仅在高度实际变化时更新Subject，避免重复执行逻辑：

import { Component, ElementRef, AfterViewChecked } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';

class ImageComponent implements AfterViewChecked {
  heightSubject = new BehaviorSubject(0);
  public height$: Observable<number> = this.heightSubject.asObservable();
  private lastHeight = 0;

  constructor(public component: CmsComponentData<CmsComponent>, private elRef: ElementRef){}

  ngAfterViewChecked(): void {
    const currentHeight = this.elRef.nativeElement.offsetHeight;
    // 仅在高度变化时更新
    if (currentHeight !== this.lastHeight) {
      this.lastHeight = currentHeight;
      this.heightSubject.next(currentHeight);
    }
  }

  compData$: Observable<BannerData> = combineLatest([this.component.data$, this.height$]).pipe(
    map(([data, height] : [CmsBannerComponent, number]) => {
      if(height < 500){
        return data.smallImage;
      }
      return data.bigImage;
    })
  );
}

此方法能减少不必要的逻辑执行，但AfterViewChecked本身仍会频繁触发，只是内部逻辑不会重复运行。

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