如何在Angular中获取Div元素高度？附示例代码

当然可以获取到这个div的高度！不过你当前的代码写法存在一个关键问题——直接在类定义里尝试赋值contentHeight = this.elementView.nativeElement.offsetHeight会触发错误，因为此时组件还没完成视图初始化，elementView这个@ViewChild引用还没被Angular实例化，处于undefined状态。

正确的实现步骤： #

1. 确保模板中有对应的模板引用变量
   先确认你的app.html里的div已经添加了#content这个模板引用，就像这样：

   <div #content>你的内容</div>
   

2. 在生命周期钩子中获取高度
   Angular提供了ngAfterViewInit()钩子，这个钩子会在组件视图及其子视图初始化完成后触发，此时@ViewChild引用的元素已经可以正常访问了。把获取高度的逻辑放到这个钩子里面：

   import {Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
   
   @Component({
     selector: 'my-app',
     templateUrl: './src/app.html'
   })
   export class AppComponent implements AfterViewInit {
     @ViewChild('content') elementView: ElementRef;
     contentHeight: number;
   
     constructor() { }
   
     ngAfterViewInit() {
       // 此时视图已初始化，可以安全访问元素
       this.contentHeight = this.elementView.nativeElement.offsetHeight;
       console.log('div高度:', this.contentHeight);
     }
   }
   

额外注意点： #

• 如果你的div内容是动态加载的（比如从后端获取数据后才渲染到div里），那ngAfterViewInit()可能还拿不到最终的正确高度，因为此时内容还没渲染完毕。这种情况下可以用setTimeout延迟一点时间获取，或者使用MutationObserver监听元素内容的变化来实时更新高度。
• 访问nativeElement时要注意，如果你开启了Angular的严格模式，可能需要添加类型断言，比如this.elementView.nativeElement as HTMLElement，避免类型报错。

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