Angular元素高度获取为0，不用setTimeout如何正确获取？

你遇到的问题本质是元素的实际渲染（包括动画、异步内容加载）晚于Angular的生命周期钩子执行时机，ngAfterViewInit和ngAfterViewChecked只能确保组件视图初始化完成，但无法保证内部内容（比如手风琴展开动画、异步加载的内容）已经完全渲染到位。以下是几种更可靠的替代方案：

1. 使用requestAnimationFrame替代固定延迟的setTimeout #

requestAnimationFrame会在浏览器下一次重绘前执行回调，能精准匹配渲染时机，比固定100ms延迟更可靠，也不会浪费不必要的等待时间：

ngAfterViewInit(): void {
  const wrapper = this.el.nativeElement;
  if (wrapper.classList.contains('myclass')) {
    const content = wrapper.querySelector('.child');
    requestAnimationFrame(() => {
      console.log(content.scrollHeight);
    });
  }
}

2. 监听CSS过渡/动画结束事件 #

如果你的手风琴通过.is-open类触发了CSS过渡（比如height从0到auto的动画），必须等过渡完成后才能获取真实高度，这时候可以监听transitionend事件：

ngAfterViewInit(): void {
  const wrapper = this.el.nativeElement;
  if (wrapper.classList.contains('myclass')) {
    const content = wrapper.querySelector('.child');
    const handleTransitionEnd = () => {
      console.log(content.scrollHeight);
      // 移除监听避免重复触发
      wrapper.removeEventListener('transitionend', handleTransitionEnd);
    };
    wrapper.addEventListener('transitionend', handleTransitionEnd);
  }
}

如果是CSS动画，把事件换成animationend即可。

3. 结合变更检测与渲染帧 #

有时候Angular的变更检测还没完成视图更新，手动触发变更检测后再用requestAnimationFrame：

import { ChangeDetectorRef } from '@angular/core';

constructor(
  private el: ElementRef,
  private cdr: ChangeDetectorRef
) {}

ngAfterViewInit(): void {
  const wrapper = this.el.nativeElement;
  if (wrapper.classList.contains('myclass')) {
    // 手动触发变更检测，确保视图已更新
    this.cdr.detectChanges();
    const content = wrapper.querySelector('.child');
    requestAnimationFrame(() => {
      console.log(content.scrollHeight);
    });
  }
}

4. 监听手风琴展开状态的变化 #

如果你的手风琴指令有控制展开的输入属性（比如isOpen），直接监听这个属性的变化，在状态变为展开后再获取高度：

import { Input, OnChanges, SimpleChanges } from '@angular/core';

@Input() isOpen: boolean;

ngOnChanges(changes: SimpleChanges): void {
  // 仅当isOpen从false变为true时执行
  if (changes.isOpen && changes.isOpen.currentValue && !changes.isOpen.previousValue) {
    const content = this.el.nativeElement.querySelector('.child');
    requestAnimationFrame(() => {
      console.log(content.scrollHeight);
    });
  }
}

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