获取元素高度

Question

我很好奇是否可以从组件模板中获得元素属性。所以我用class做了一个简单的div，我做了这个类：

export class viewApp{

  elementView: any;
  viewHeight: number;
  myDOM: Object;

  constructor() {
    this.myDOM = new BrowserDomAdapter();
  }

  clickMe(){
    this.elementView = this.myDOM.query('div.view-main-screen');
    this.viewHeight = this.myDOM.getStyle(this.elementView, 'height');
  }
}

getStyle()，query()来自BrowserDomAdapter。我的问题是，当我尝试获取高度时，它是null，但当我通过setStyle()设置一些高度，然后通过getStyle()获取它时，它会返回适当的值。在浏览器中检查了DOM和样式后，我发现这是由于两个CSS元素造成的。一个是：.view-main-screen[_ngcontent-aer-1]{}，第二个是element{}。.view-main-screen有一些样式，但元素为空。当我通过setStyle()添加样式时，它会出现在element{}中。为什么会这样呢？如何使用Angular2获取元素属性？

Answer 1

正确的方法是使用@ViewChild()装饰器：

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

模板：

<div class="view-main-screen" #mainScreen></div>

组件：

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

export class viewApp{

      @ViewChild('mainScreen') elementView: ElementRef;
      viewHeight: number;

      constructor() {
      }

      clickMe(){
        this.viewHeight = this.elementView.nativeElement.offsetHeight;
      }
}

这应该可以做到这一点，但显然你需要添加你的组件装饰器。

编辑：

对于Angular 8或更高版本，您需要在ViewChild中提供第二个参数

@ViewChild('mainScreen', {read: ElementRef, static:false}) elementView: ElementRef;

Answer 2

update2

constructor(private elementRef:ElementRef) {}

someMethod() {
   console.log(this.elementRef.nativeElement.offsetHeight);
}

不鼓励直接访问nativeElement，但据我所知，目前的Angular没有提供其他方式。

更新

https://github.com/angular/angular/pull/8452#issuecomment-220460761

mhevery在12天前评论说，我们已经决定删除标尺服务，所以它不是公共API的一部分。

原始

据我所知，Ruler类应该提供该功能，如果这还不够，您可能需要访问elementRef.nativeElement并使用元素提供的直接DOM访问和函数。

new Ruler(DOM).measure(this.elRef).then((rect: any) => {
});

规则服务在WebWorker中是安全的。另请参阅https://github.com/angular/angular/issues/6515#issuecomment-173353649上的评论

Answer 3

<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>

itemClick(dom){
  var height=dom.clientHeight;
  // ...
}