properties – 获取元素高度

发布时间：2020-12-17 07:53:08 所属栏目：安全来源：网络整理

导读：我很好奇,如果我可以从组件模板获取元素属性. 所以我用class制作了简单的div,并且我已经创建了这个类： export class viewApp{ elementView: any; viewHeight: number; myDOM: Object; constructor() { this.myDOM = new BrowserDomAdapter(); } clickMe(){

我很好奇,如果我可以从组件模板获取元素属性.
所以我用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] {},第二个是元素{}.
.view-main-screen有一些样式,但元素是空的.当我通过setStyle()添加样式时,它出现在元素{}中.这是为什么？如何使用Angular2获取元素属性？

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!