如何在Angular中获取动态渲染元素的尺寸

Question

想象一下： 1.在component.html中，你有

<div id = "myDiv">
      <p>{{text}}</p>
<div>
<button (click)="changeText()">changeText</button>

1. 在 component.css / 我们没有明确设置 div 的高度。 div 的高度取决于 p 元素 的高度。也就是说，p里面的字数决定了div

的高度

2. 在 component.ts 中 有一个函数，我们可以随时调用它并设置 {{text}} 属性。因此 div 和 p 在运行时动态呈现。喜欢：

export class someComponent implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit() {
  }

  changeText() {
    this.text = 'blablablabla.....';
    let divEl = this.el.nativeElement.querySelector('#myDiv');
    divEl.clientHeight/ or offsetHeight or/ getComputedStyle (can not get the correct value here!)
  }
}

问：我改变文本后如何获得div的实际高度。 （我可以通过 ElementRef 获取元素）我试过了

Answer 1

它返回以前的值，因为浏览器需要时间来计算新样式。

RequestAnimationFrame API 是您正在寻找的。​​p>

设置新文本后，使用 RequestAnimationFrameAPI，它是在浏览器准备就绪时触发的回调，基本上是在其渲染队列为空时。

this.text = "blablablabla...."
window.requestAnimationFrame(() => {
  // access the new css values here
})

Answer 2

在大多数情况下，您不需要在代码中设置 div 容器的高度。它会自动调整其内容，并且可以使用 CSS 样式属性进行微调。

但是如果你想对段落高度做一些特殊的计算来设置div的高度，你可以通过数据绑定来完成（在计算中使用element.offsetHeight属性）：

<div [style.height.px]="calculateDivHeight(paragraph)">
    <p #paragraph>{{text}}</p>
<div>
<button (click)="changeText()">changeText</button>

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

---

如果您在更改段落内容后强制更改检测（请参阅this answer），您当前的代码也可以工作：

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

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

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