Angular 2 ElementRef nativeElement offsetWidth始终为0

Question

我需要获得具有动态宽度的元素的宽度，我可以使用纯javascript而不是Angular 2获得宽度。

constructor(private element: ElementRef) {
// ....

获得宽度

let width =  this.element.nativeElement.offsetWidth;

console.log('js offset width', document.getElementById('foobar').offsetWidth);
console.log('angular2 offset width', width);

这很好用：

document.getElementById('foobar').offsetWidth 

但不是角度2的宽度，它总是为0.那么如何通过Angular的ElementRef获得偏移宽度？

Answer 1

您没有将TemplateRef与任何DOM元素

相关联

@ViewChild('foo') foo: TemplateRef;

将HTML中的属性设为

 <div #foo></div>

现在OnInit尝试获取它将为非零的值。

<强> LIVE DEMO