12 
<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()ましたが、機能しません。

レンダリング後に要素の高さ/幅を取得する方法は?

4

5 に答える 5

16

必要なのは、Angular がイベントのライフサイクルを処理し、html をコンパイルしてページに挿入し、ブラウザがその html のレンダリングを終了した後の要素の高さです。

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

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

おそらくゼロミリ秒の間隔が機能します。これは、offsetHeight を呼び出すと、必要に応じてレイアウトの再計算がトリガーされるためです (こちらを参照)。

これは一般的な問題であり、フレームワーク固有の問題ではなく、ブラウザーの動作方法にすぎません。一般に、この種のロジック (高さが安定するまで X を実行するまで待機する) をできるだけ回避することをお勧めしますが、修正が困難な問題が発生する傾向があります。

于 2016-01-05T22:42:30.577 に答える
5

機能を試すngAfterViewInit

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

そして、あなたのdivHTMLはそのままですか？それ以外の場合は、 の後のスペースを削除することを検討してくださいid:

<div style="width:100%;height:100%;position:relative;background-color:white" id="OuterSvg">
于 2016-01-05T15:42:21.470 に答える
3

イベントは私のためAfterViewCheckedにngIf働いた。eventAfterViewCheckedイベントは、DOM が更新されるたびにトリガーされます。さらに、高さを子コンポーネントに送信することもできます。

Angular のドキュメントにあるように:

Angular がコンポーネントのビューと子ビュー / ディレクティブがあるビューをチェックした後に応答します。

ngAfterViewInit() および後続のすべての ngAfterContentChecked() の後に呼び出されます

したがって、コードは次のようになります。

export class YourComponent implements AfterViewChecked {

    @ViewChild('fooWrapper') sidebarElementRef: ElementRef;

    ngAfterViewChecked() {
        this.divHeight = this.sidebarElementRef.nativeElement.offsetHeight;
    }
}

HTML:

<div #fooWrapper>        
    <fooComponent 
        *ngIf="divHeight > 0"
        [Height]="divHeight">
    </fooComponent>        
</div>
于 2019-03-14T11:43:46.520 に答える
0

試すionViewDidEnter

ビューのライフサイクル フック 幸いなことに、Ionic は一連のビューのライフサイクル フックを NavController (Ionic モジュールの一部) にパッケージ化します。イベント ハンドラーの 4 つのパターンに従います。

ionViewLoadedは ngOnInitと同じように機能し、ビューが最初に DOM にロードされるときに 1 回起動します

ionViewWillEnter およびionViewDidEnter は、問題のページがアクティブになる前後に使用できるフックです。

ionViewWillLeave とionViewDidLeaveは、ページがビューポートを離れる前後に使用できるフックです

ionViewWillUnload とionViewDidUnloadは、ページが DOM から削除される前後に使用できるフックです。

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

于 2016-08-07T14:20:19.983 に答える