我很好奇是否可以从组件模板中获取元素属性。 所以我用类制作了简单的 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 获取元素属性?
最佳答案
正确的方法是使用@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;
关于properties - 获取元素高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34919738/