获得元素高度

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

应该这样做,但显然你需要添加你的组件装饰器.

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天前发表评论我们决定删除Ruler服务,因此它不属于公共API.

原版的

据我所知,Ruler该类应该提供该功能 https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts如果这不是你想要的,你可能需要访问elementRef.nativeElement和使用直接DOM访问和元素提供的功能.

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

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