以角度计算/获取隐藏的div宽度答案

【问题标题】：calculate/get hidden div width in angular以角度计算/获取隐藏的div宽度
【发布时间】：2018-05-26 23:39:47
【问题描述】：

在 Angular 中，我有一个隐藏的 div，它应该在事件中可见。
事件触发相应的方法。到目前为止一切顺利。
但我需要在显示之前计算div 的位置。我使用以下代码来获取div 的边界并计算实际位置，但div 的宽度为零，因为它是隐藏的。

EventTriggerMethod(myDiv){
  console.log(myDiv.getBoundingClientRect().width);
  //OR
  console.log(window.getComputedStyle(myDiv).width);
  //Both return 0 when div is hidden.
}

如何获得不可见的 div 的实际宽度？

【问题讨论】：

我认为在这种情况下你不能得到零以外的东西。 hidden 属性在 div 上设置display: none。当 div 变得可见时，它的大小取决于新的display 样式属性（block、inline-block、inline 等），当 div 隐藏时不知道。
如何隐藏 div？使用 *ngIf?
我使用<div ... [class.show]="ShowDropdownContent">，其中有.show{display:block;}
@ConnorsFan 我想知道，下拉菜单和菜单如何在显示popup-context 之前计算容器的边界？这样他们就可以正确显示所有隐藏的弹出上下文。

标签： javascript angular

【解决方案1】：

元素必须可见且没有display:none 才能计算其大小。我见过的两种解决方法是：

1) 将组件远离屏幕并计算尺寸。 2) 关闭display:none，计算大小，然后重新打开display:none。

只要你在同一个函数中执行#2，它就永远不会显示，因为浏览器的重绘功能直到你的函数完成后才会发生。并且由于 display:none 在函数结束时重新打开，因此该元素将永远不会显示。

【讨论】：