絶対位置の要素の幅を角度で取得する方法

Question

コンポーネントから幅を取得しようとしていますが、0です。また、ngOnChanges（）にコードを入れてみました。

constructor(private element: ElementRef) { 
    this.htmlElement = this.element.nativeElement; 
    let width = this.htmlElement.offsetWidth; 
} 

要素のスタイル：

display: block; 
position: absolute; 
left: 100; 

私は（clientWidthを使用してみました）が、それはあまりにも0です。どのように角度2の要素の幅を取得できますか？

更新：

私は絶対位置を使用していないと幅が正しいので、私は、私は絶対的な位置付け要素の幅を得るのですか疑問があると仮定？使用する

Answer 1

に要素に関連付けなければならないし、に直接要素を注入する代わりに@ViewChild()デコレータを使用してください。

import {Component, ElementRef, ViewChild, HTMLElement, AfterViewInit} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div #child> 
     <h2>Hello!</h2> 
    </div> 
    `, 
}) 
export class App implements AfterViewInit { 
    @ViewChild('child') element: any; 
    htmlElement: HTMLElement; 

    constructor() {} 

    ngAfterViewInit() { 
    this.htmlElement = this.element.nativeElement; 
    let width = this.element.nativeElement.offsetWidth; 
    } 
} 

またはthe working example hereを参照してください。

は、このコードを試してみてください。また、コメントで説明を確認してください。

Answer 2

試してみてください。

const rect = this.element.nativeElement.getBoundingClientRect(); 
const width = rect.width; 

Answer 3

あなたはAfterViewInitライフサイクルフックメソッドにコードを移動しようelementRef

@ViewChild('foo') foo: TemplateRef; 

<div #foo> 
    <h2>Hello {{name}}</h2> 
</div> 
    {{foo.clientWidth}} 

LIVE DEMO