要素のサイズが角2で変化したときの観察方法

Question

テンプレートのdivのサイズが変更されたときに何らかのアクションを実行する最も良い方法は何ですか？ウィンドウのサイズを変更すると、divのサイズが変更されます。 Rxjs Observable/Subscribeや他の方法がありますか？

テンプレート：

<div #eMainFrame class="main-frame"> 
    ... 
</div> 

コンポーネント：

@Component({ 
    selector: 'app-box', 
    templateUrl: './box.component.html', 
    styleUrls: ['./box.component.css'] 
}) 
export class BoxComponent implements OnInit { 
    @ViewChild('eMainFrame') eMainFrame : ElementRef; 

    constructor(){} 

    ngOnInit(){ 
    // This shows the elements current size 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
    } 
} 

更新されたコンポーネント（ウィンドウサイズが変更された場合、この例では、検出）

constructor(ngZone: NgZone) { 

    window.onresize = (e) => { 
    ngZone.run(() => { 
     clearTimeout(this.timerWindowResize); 
     this.timerWindowResize = setTimeout(this._calculateDivSize, 100); 
    }); 
    } 
} 

_calculateDivSize(){ 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
} 

が、これは私にエラーを与え：

EXCEPTION: Cannot read property 'nativeElement' of undefined

Answer 1

ブラウザを使用すると、値に

ngDoCheck()をポーリングする必要があるので、何を提供していない角度の実行が検出を変更したときに呼び出されます。あなたが唯一のコンポーネントを作成した後に一度チェックする必要がある場合は

ngDoCheck() { 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
} 

、あなたは `element.resize`を試してみました

ngAfterContentInit(){ 
    // This shows the elements current size 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
}