如何在angular2中获得Dom的高度？

Question

<div style="width:100%;height:100%;position:relative;background-color:white" id ="OuterSvg"> </div>

onPageLoaded(){
     console.log(document.getElementById("OuterSvg").offsetHeight); //get 0.
}   

ngAfterViewInit(){
     console.log(document.getElementById("OuterSvg").offsetHeight); //get 0.
}

我尝试过onPageLoaded()和ngAfterViewInit()但也没有工作...那么如何在dom的高度渲染后得到元素的高度/宽度？

Answer 1

你想要的是Angular处理事件生命周期后的元素高度,编译html并将其注入页面,浏览器完成呈现html.

只有当它稳定时才需要高度,而不是之前.问题是在Angular放弃Javascript VM转向之后所做的一切,并且没有"浏览器完成渲染"或"布局计算"事件.

您需要为浏览器提供计算高度的机会并应用它.比如打电话setTimeout.这将为浏览器提供计算高度的机会.

零ms的间隔可能会起作用.这是因为如果需要,调用offsetHeight会触发布局重新计算(请参阅此处).

这是一个普遍的问题,并不是特定于框架的,它只是浏览器的工作方式.一般来说,最好尽可能地避免这种逻辑(等到高度稳定做X),它往往会造成难以修复的问题.

Answer 2

试试这个功能 ngAfterViewInit

ngAfterViewInit(){
     console.log(document.getElementById("OuterSvg").offsetHeight);
}

你的divHTML是不是这样？否则您可以考虑在以下情况后删除空格id:

<div style="width:100%;height:100%;position:relative;background-color:white" id="OuterSvg">