我很好奇,如果我可以从组件模板获取元素属性.
所以我用class制作了简单的div,并且我已经创建了这个类：
所以我用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;
}
}
应该这样做,但显然你需要添加你的组件装饰器.
