如何在Angular中获取动态呈现元素的维度 [英] How to get the dimension of dynamic rendered element in Angular

问题描述

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

  < div id =myDiv> 
< p> {{text}}< / p> 
< div> 
< button（click）=changeText（）> changeText< / button>在组件中，
  

2. 。 css /我们不明确设置div的高度。 div 的高度取决于 p元素的高度。换句话说，p中的单词数决定了组件中 div




3. 的高度。 ts
   有一个函数，我们可以随时调用它并设置 {{text}}属性。所以div和p会在运行时动态呈现。如：

data-console =truedata-babel =false>
export class someComponent implements OnInit {constructor（private el：ElementRef）{} ngOnInit（）{} changeText（）{this.text ='blablablabla .....';让divEl = this.el.nativeElement.querySelector（'＃myDiv'）; divEl.clientHeight /或offsetHeight或/ getComputedStyle（在这里无法获得正确的值！）}}

问：我改变文字后，怎样才能得到div的实际高度。 （我可以通过ElementRef获取元素）我尝试过.offsetHeight，.clientHeight，.getComputedStyle.height .... //似乎所有这些都返回原始值，而不是运行时的实际值。

解决方案

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

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

 < div [style.height.px] =calculateDivHeight（paragraph）> 
< p＃段落> {{text}}< / p> 
< div> 
< button（click）=changeText（）> changeText< / button> 
  

  public calculateDivHeight（paragraph ：HTMLElement）：number {
 return doSomeProcessing（paragraph.offsetHeight）; 
 
  

---

您当前的代码可以如果您在更改段落内容之后强制更改检测（请参阅此答案）：

 从'@ angular / core'导入{ApplicationRef}; 
 
构造函数（private applicationRef：ApplicationRef，...）{
 ... 
} 
 
 changeText（）{
 this。 text ='blablablabla .....'; 
 this.applicationRef.tick（）; 
 let divEl = this.el.nativeElement.querySelector（'＃myDiv'）; 
 ... 
} 
  

just imagine: 1. in component.html, you have

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

2. in component.css / we do not set the height of div explicitly. The height of div depends on the height of p element. In other words, the number of words inside p decides the height of div

3. in component.ts there is a function, which we can call it anytime and set the {{text}} property. So the div and p get rendered at runtime and dynamically. Like:

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!)
  }
}

Q: how can we get the actual height of the div after I change the text. (I can get the element by ElementRef) I have tried .offsetHeight, .clientHeight, .getComputedStyle.height....// It seems like all of them return the original value, not the actual value at runtime.

解决方案

In most cases, you don't need to set the height of the div container in code. It automatically adjusts to its content and can be fine-tuned with CSS style attributes.

But if you want to do some special calculations with the paragraph height to set the height of the div, you can do it with data binding (using the element.offsetHeight property in the calculations):

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

---

Your current code could also work if you force change detection (see this answer) just after changing the paragraph content:

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

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

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

这篇关于如何在Angular中获取动态呈现元素的维度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！