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天前评论过我们已决定删除标尺服务，因此它不属于公共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

上的评论

Answer 3

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

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

Answer 4

  <div #getElementHeight>
      Height
  </div>

元素的高度为{{ getElementHeight.offsetHeight }}

获取元素高度

4 个答案: