Angular 4：*ngIf显示元素后获取高度的触发事件咨询

这确实是Angular开发里很常见的困扰——因为*ngIf是结构型指令，只有当绑定的条件变为true时，元素才会被真正渲染到DOM树中。你在设置条件的函数里直接去拿高度，此时DOM还没完成更新，自然拿不到正确的值。下面给你几个可靠的解决方案：

方案1：利用AfterViewChecked生命周期钩子 #

这个钩子会在每次视图更新完成后触发，包括*ngIf元素被渲染到DOM之后。不过要注意，它会频繁触发（比如组件数据变化、父组件更新等都会触发），所以需要加个判断逻辑，避免重复执行获取高度的操作。

示例代码：

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

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit, AfterViewChecked {
  @ViewChild('targetDiv') targetDiv!: ElementRef;
  showDiv = false;
  divHeight: number | null = null;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // 模拟延迟触发显示div的动作
    setTimeout(() => {
      this.showDiv = true;
    }, 1000);
  }

  ngAfterViewChecked() {
    // 只有当div显示且还未获取过高度时执行
    if (this.showDiv && !this.divHeight && this.targetDiv) {
      this.divHeight = this.targetDiv.nativeElement.offsetHeight;
      console.log('div高度：', this.divHeight);
      // 手动标记变更检测完成，避免无限循环
      this.cdr.detectChanges();
    }
  }
}

对应的模板：

<div #targetDiv *ngIf="showDiv">我是被*ngIf控制的div</div>

方案2：设置*ngIf后用setTimeout延迟获取 #

这是个简单直接的方法，利用setTimeout把获取高度的代码放到下一个事件循环中，此时DOM已经完成了更新。

示例代码：

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

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @ViewChild('targetDiv') targetDiv!: ElementRef;
  showDiv = false;

  constructor() {}

  ngOnInit() {}

  triggerShowDiv() {
    this.showDiv = true;
    // 延迟到下一个事件循环，确保DOM已更新
    setTimeout(() => {
      if (this.targetDiv) {
        const height = this.targetDiv.nativeElement.offsetHeight;
        console.log('div高度：', height);
      }
    }, 0);
  }
}

模板：

<button (click)="triggerShowDiv()">显示div并获取高度</button>
<div #targetDiv *ngIf="showDiv">我是被*ngIf控制的div</div>

方案3：结合ChangeDetectorRef手动触发变更检测 #

如果你不想用setTimeout这种偏“hack”的方式，可以在设置showDiv为true后，手动调用detectChanges()触发变更检测，让元素立即渲染到DOM，然后再获取高度。

示例代码：

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

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @ViewChild('targetDiv') targetDiv!: ElementRef;
  showDiv = false;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {}

  triggerShowDiv() {
    this.showDiv = true;
    // 手动触发变更检测，让DOM立即更新
    this.cdr.detectChanges();
    // 现在可以获取高度了
    if (this.targetDiv) {
      const height = this.targetDiv.nativeElement.offsetHeight;
      console.log('div高度：', height);
    }
  }
}

这三个方案里，方案1是最符合Angular生命周期规范的，适合需要持续监听元素状态的场景；方案2和3更适合简单的一次性触发场景，你可以根据自己的业务需求选择~

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