Angular 4：@ViewChild setter获取*ngIf元素高度首次触发失效问题

我之前也碰到过一模一样的情况！其实问题出在两个地方：要么是@ViewChild的配置没到位，要么是元素刚被添加到DOM时，浏览器还没完成布局渲染，直接获取高度拿不到正确值。下面给你两种靠谱的解决办法：

方法一：用@ViewChild的Setter结合requestAnimationFrame #

这是我最常用的方案，能确保首次显示就拿到准确的高度：

组件代码 #

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

@Component({
  selector: 'app-height-demo',
  templateUrl: './height-demo.component.html'
})
export class HeightDemoComponent {
  showElement = false;

  // 这里一定要加 { static: false }，确保视图变更时能更新引用
  @ViewChild('targetElement', { static: false }) 
  set targetElement(el: ElementRef) {
    if (el) {
      // 用requestAnimationFrame等待浏览器完成布局渲染
      requestAnimationFrame(() => {
        const elementHeight = el.nativeElement.offsetHeight;
        console.log('首次显示的元素高度:', elementHeight);
        // 这里写你需要的业务逻辑
      });
    }
  }

  toggleElement() {
    this.showElement = !this.showElement;
  }
}

模板代码 #

<button (click)="toggleElement()">切换元素显示</button>
<div #targetElement *ngIf="showElement" class="demo-content">
  这是需要获取高度的内容区域，可能包含动态加载的文本或子元素
</div>

为什么这样有效？

当*ngIf变为true时，Angular会把元素添加到DOM，但此时浏览器还没完成元素的布局计算。requestAnimationFrame会把你的代码放到浏览器下一次重绘前执行，这时候元素的高度已经计算完成，就能拿到准确值了。同时{ static: false }确保@ViewChild会在每次视图变更时更新元素引用，首次显示也能触发setter。

方法二：用ngAfterViewChecked钩子结合状态判断 #

如果你不想用setter，也可以通过视图检查钩子来实现，但要注意加状态判断避免重复执行：

组件代码 #

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

@Component({
  selector: 'app-height-demo',
  templateUrl: './height-demo.component.html'
})
export class HeightDemoComponent implements AfterViewChecked {
  showElement = false;
  @ViewChild('targetElement', { static: false }) targetElement: ElementRef;
  // 标记元素是否已经处理过，避免每次变更检测都执行
  private hasProcessed = false;

  ngAfterViewChecked() {
    // 只有当元素显示、未处理过、且引用存在时才执行
    if (this.showElement && !this.hasProcessed && this.targetElement) {
      this.hasProcessed = true;
      const elementHeight = this.targetElement.nativeElement.offsetHeight;
      console.log('元素高度:', elementHeight);
    } else if (!this.showElement) {
      // 元素隐藏时重置标记，下次显示时重新处理
      this.hasProcessed = false;
    }
  }

  toggleElement() {
    this.showElement = !this.showElement;
  }
}

这种方法利用ngAfterViewChecked在每次视图变更后触发的特性，通过hasProcessed状态避免重复执行逻辑，同样能在首次显示时获取到高度。

为什么你的原始代码只在第二次点击才生效？ #

大概率是你没设置{ static: false }，或者setter里直接获取高度时，DOM还没完成渲染，导致首次拿到的高度为0或者没触发后续逻辑。而第二次点击时，元素已经被渲染过一次，浏览器缓存了布局信息，所以能拿到正确值。

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