Comment obtenir la dimension de l'élément rendu dynamiquement en Angular

Question

Imaginez simplement : 1. dans component.html, vous avez

2. dans component.css / nous ne définissons pas explicitement la hauteur du div. La hauteur du div dépend de la hauteur de l'élément p. En d'autres termes, le nombre de mots à l'intérieur du p décide de la hauteur du div

3. dans component.ts il y a une fonction, que nous pouvons appeler à tout moment et définir la propriété {{text}}. Ainsi, le div et le p sont rendus à l'exécution et dynamiquement. Comme :

   export class someComponent implements OnInit {

   constructor(private el: ElementRef) { }

   ngOnInit() { }

   changeText() { this.text = 'blablablabla.....'; let divEl = this.el.nativeElement.querySelector('#myDiv'); divEl.clientHeight/ ou offsetHeight ou/ getComputedStyle (ne peut pas obtenir la bonne valeur ici !) } }

Q : Comment pouvons-nous obtenir la hauteur réelle du div après avoir changé le texte. (Je peux obtenir l'élément par ElementRef) J'ai essayé .offsetHeight, .clientHeight, .getComputedStyle.height....// Il semble que tous retournent la valeur initiale, pas la valeur réelle à l'exécution.

Answer 1

Dans la plupart des cas, vous n'avez pas besoin de définir la hauteur du conteneur div dans le code. Il s'ajuste automatiquement à son contenu et peut être affiné avec les attributs de style CSS.

Mais si vous souhaitez effectuer certains calculs spéciaux avec la hauteur du paragraphe pour définir la hauteur du div, vous pouvez le faire avec la liaison de données (en utilisant la propriété element.offsetHeight dans les calculs) :

public calculateDivHeight(paragraph: HTMLElement): number {
    return doSomeProcessing(paragraph.offsetHeight);
}

---

Votre code actuel pourrait également fonctionner si vous forcez la détection des changements (voir cette réponse) juste après avoir modifié le contenu du paragraphe :

import { ApplicationRef } from '@angular/core';

constructor(private applicationRef: ApplicationRef, ...) {
  ...
}

changeText() {
  this.text = 'blablablabla.....';
  this.applicationRef.tick();
  let divEl = this.el.nativeElement.querySelector('#myDiv');
  ...
}

Answer 2

Il renvoie les valeurs précédentes car il faut du temps au navigateur pour calculer le nouveau style.

Le API RequestAnimationFrame est ce que vous cherchez.

Une fois que vous avez défini le nouveau texte, utilisez l'API RequestAnimationFrame, c'est un rappel déclenché une fois que le navigateur est prêt, essentiellement lorsque sa file d'attente de rendu est vide.

this.text = "blablablabla...."
window.requestAnimationFrame(() => {
  // accédez aux nouvelles valeurs css ici
})