web-dev-qa-db-fra.com

Comment obtenir la taille de Dom dans 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.
}

J'ai essayé onPageLoaded () et ngAfterViewInit () mais ne fonctionne pas non plus ... Alors, comment obtenir la hauteur/largeur de l'élément après la hauteur de la dom rendue?

angularionic2
10
Kim Wong

Ce que vous voulez, c'est la hauteur d'un élément après que Angular a traité les cycles de vie des événements, compilé le code HTML et l'a injecté dans la page, et que le navigateur ait fini de rendre ce code HTML. 

Vous avez besoin de la hauteur que lorsque sa stabilité, pas avant. Le problème est que tout ce qui est fait après Angular abandonne le tour de Javascript VM, et il n'y a pas d'événement "rendu du navigateur terminé" ou "mise en page calculée". 

Vous devez donner au navigateur une chance de calculer la hauteur et de l'appliquer. Par exemple, appelez setTimeout. Cela donnera au navigateur la possibilité de calculer la hauteur.

Un intervalle de zéro ms fonctionnerait probablement. En effet, les appels à offsetHeight déclenchent un nouveau calcul de la mise en page si nécessaire (voir ici ). 

Ceci est un problème général et n'est pas spécifique au framework, c'est juste la façon dont les navigateurs fonctionnent. En général, il est préférable d’essayer d’éviter autant que possible ce type de logique (attendre que la hauteur soit stable pour faire X), cela a tendance à créer des problèmes difficiles à résoudre.

11
Angular University

Essayez la fonction ngAfterViewInit

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

Et votre HTML div est-il identique? Sinon, vous pourriez envisager de supprimer l'espace après id:

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

Cela semble fonctionner

Dans la vue

<results-control></results-control>

Dans le composant

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

Essayez ionViewDidEnter

Afficher les crochets du cycle de vie Heureusement, Ionic regroupe un ensemble de crochets de vue Cycle de vie dans le NavController - composant du module Ionic .

ionViewLoaded fonctionne de la même manière que ngOnInit, se déclenche une fois lorsque la vue est initialement chargé dans le DOM 

ionViewWillEnter et ionViewDidEnter sont des crochets disponibles avant et après la page en question devient actif 

ionViewWillLeave et ionViewDidLeave sont des crochets qui sont disponible avant et après que la page quitte la fenêtre

ionViewWillUnload et ionViewDidUnload sont des crochets disponibles avant et après la suppression de la page du DOM

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

0
nottinhill