如何在Angular

Question

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

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

在 component.css /

1. 中，我们没有明确设置div的高度。 div 的高度取决于 p元素的高度。换句话说，p中的单词数决定 div的高度

component.ts中的

2. 有一个函数，我们可以随时调用它并设置 {{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获取元素）我尝试过.offsetHeight，.clientHeight，.getComputedStyle.height .... //看起来所有这些都返回原始值，而不是运行时的实际值。

Answer 1

在大多数情况下，您无需在代码中设置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');
  ...
}

Answer 2

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

RequestAnimationFrame API正是您要找的。

一旦你设置了新文本，使用RequestAnimationFrameAPI，它就是一旦浏览器准备好就会触发回调，基本上当它的渲染队列为空时。

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