获取元素高度答案

【问题标题】：Getting element height获取元素高度
【发布时间】：2016-04-27 11:04:32
【问题描述】：

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

【问题讨论】：

标签： properties typescript angular

【解决方案1】：

更新2

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上的cmets

【讨论】：

好的，但是我该如何使用呢？我尝试导入 Ruler 或 Rectangle 但编译器抛出错误。无论如何，谢谢您的回复！
我不知道 TS 导入，我只使用 Dart。我发现它在使用的唯一地方是github.com/angular/angular/blob/…
好发现，@GünterZöchbauer
为什么不鼓励访问原生元素？
这是一个古老的答案，当时 Angular 团队对此有强烈的看法。他们的立场减弱了。访问它会阻止你使用服务器端渲染和网络工作者，但不是每个人都想要，因此对你来说更重要的是你的电话。

【解决方案2】：

正确的方法是使用@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;

【讨论】：

如果这不起作用，我们可能不得不使用`@ViewChild('mainScreen', {read: ElementRef}) elementView: ElementRef;`

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

  <div #getElementHeight>
      Height
  </div>

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

【讨论】：

虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。在解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。