Question

我在这里有一个非常简单的例子

它只是一个带有单个div的角度应用

是否可以以角度

获得div的高度

我以为我可以用@ViewChild和offsetHeight

来做

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

@Component({
  selector: 'my-app',
  templateUrl: './src/app.html'
})

export class AppComponent{

  @ViewChild('content') elementView: ElementRef;

  contentHeight: number;

  constructor() {

  }

  //contentHeight = this.elementView.nativeElement.offsetHeight

}

Answer 1

ViewChild修饰变量elementView仅在ngAfterViewInit生命周期挂钩后设置：

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;
  }
}

有关详细信息，请参阅https://angular.io/api/core/ViewChild#how-to-use。

Answer 2

取决于你所说的“身高”

ClientHeight

以像素为单位返回元素的内部高度，包括填充但不是水平滚动条高度，边框或边距

将 NativeElement 转换为 HTMLElement 后，您可以使用Element.getBoundingClientRect()方法。

ngAfterViewInit() {
    let height = (<HTMLElement>this.elementView.nativeElement).getBoundingClientRect().height
}

的offsetHeight

是一种测量，包括元素边框，元素垂直填充，元素水平滚动条（如果存在，如果渲染）和元素CSS高度。 link

ngAfterViewInit() {
    let height = this.elementView.nativeElement.offsetHeight
}

确保在设置元素大小（ ngAfterViewInit（））后执行此操作。您可以找到更多信息Angular Lifecycle Hooks here。

角度2获取元素高度

2 个答案:

ClientHeight

的offsetHeight