web-dev-qa-db-ja.com

angular2でドムの高さを取得する方法は？

<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（）を試してみましたが、機能しません... SO DOMの高さがレンダリングされた後、要素の高さ/幅を取得するには

angularionic2
12
Kim Wong

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

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

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

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

これは一般的な問題であり、フレームワークに固有のものではなく、ブラウザの動作方法そのものです。一般に、この種のロジック（Xを実行するために高さが安定するまで待つ）をできるだけ回避しようとすると、問題の修正が困難になる傾向があります。

14
Angular University

関数ngAfterViewInitを試してください

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

そして、あなたのdiv HTMLはそうですか？そうでない場合は、idの後のスペースを削除することを検討してください。

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

これはうまくいくようです

ビューで

<results-control></results-control>

コンポーネント内

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);
    } 
}
2
i8abug

イベントAfterViewCheckedとngIfがうまくいきました。イベントAfterViewCheckedイベントは、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>
1
StepUp

ionViewDidEnterをお試しください

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

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

ionViewWillEnterとionViewDidEnterは、問題のページがアクティブになる前後に利用できるフックです

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

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

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

0
stevek