properties - 获取元素高度

Question

我很好奇是否可以从组件模板中获取元素属性。所以我用类制作了简单的 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;