angular2のDomの高さを取得するには？

Question

<div style="width:100%;height:100%;position:relative;background-color:white" id ="OuterSvg"> </div> 

onPageLoaded(){ 
    console.log(document.getElementById("OuterSvg").offsetHeight); //get 0. 
} 

ngAfterViewInit(){ 
    console.log(document.getElementById("OuterSvg").offsetHeight); //get 0. 
} 

私はonPageLoaded（）とngAfterViewInit（）を試していますが、動作しません... DOMの高さがレンダリングされた後、要素の高さ/幅を取得する方法は？

Answer 1

何をしたい角度は、イベントのライフサイクルを処理し、HTMLをコンパイルし、ページに注入し、ブラウザはそれをレンダリングし終えた後に要素の高さでありますhtml。

高さが必要なのは、安定していないときだけです。問題は、AngularがJavascript VMのターンを放棄した後に行われるすべての処理であり、「ブラウザでのレンダリングが完了しました」または「レイアウト計算された」イベントがないことです。

ブラウザに高さを計算して適用する必要があります。たとえば、setTimeoutとします。これにより、ブラウザは高さを計算する機会を与えます。

おそらく0msの間隔が働くでしょう。これは、必要に応じてoffsetHeightを呼び出すとレイアウトの再計算が開始されるためです（here参照）。

これは一般的な問題であり、ブラウザ固有の仕組みではなく、フレームワーク固有のものです。一般的に、できるだけこの種のロジック（Xを行うために高さが安定するまで待つ）を避けようとすると、問題を解決するのが難しくなりがちです。

Answer 2

はngAfterViewInit

ngAfterViewInit(){ 
    console.log(document.getElementById("OuterSvg").offsetHeight); 
} 

機能を試してみて、それがあるように、あなたのdiv HTMLのですか？そうしないと、idの後にスペースを削除することを検討可能性があります

<div style="width:100%;height:100%;position:relative;background-color:white" id="OuterSvg"> 

Answer 3

これはionViewDidEnter

ビューのライフサイクルフックは幸いなことに、イオンは、ビュー のセットをパッケージ化してみ

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

@Component({ 
    selector: 'results-control', 
    template: '<div #resultsControlContainer> ... </div>' 
}) 
export class ResultsControl { 

    @ViewChild('resultsControlContainer') resultsControlContainerEl: ElementRef; 

    ngAfterViewInit() { 
     var height = this.resultsControlContainerEl.nativeElement.offsetHeight; 
     console.log(height); 
    } 
} 

Answer 4

コンポーネントで表示

<results-control></results-control> 

で

を動作するようですライフサイクルがNavControllerにフックするイオンモジュールの一部。 彼らは、イベントハンドラの4つのパターンは、次のとおりです。ngOnInitと同じように動作します

ionViewLoadedを、火災が一度ビュー が最初にDOM

ionViewWillEnterとionViewDidEnter にロードされたときにフックです質問 でページがアクティブ

ionViewWillLeaveとionViewになる前と後にご利用いただけますDidLeaveは利用でき あるフックですページビューポートを離れる前と後の

がionViewWillUnloadとionViewDidUnloadは、ページの前と後の 利用できますフックですDOM

https://webcake.co/page-lifecycle-hooks-in-ionic-2/

から削除されます