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

<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的高度渲染后获取元素的高度/宽度？如何在angular2中获得Dom的高度？

来源

2016-01-05 Kim Wong

可能与http://stackoverflow.com/a/294273/217408有关 - 请参阅第一条评论或尝试getBoundingClientRect（）。height' –

@GünterZöchbauergetBoundingClientRect（）。height也会返回0. 所以作为评论，我应该使用settimeout方法？但angulars是否有任何功能可以在元素dom准备好后获得高度？ –

你需要的是一个元素的高度角已经处理后的事件生命周期，编译HTML和注射到页面上，并在浏览器完成渲染HTML。

只有在稳定时才需要高度，而不是在之前。问题在于，在Angular放弃JavaScript VM之后所做的一切，并没有“浏览器完成渲染”或“布局计算”事件。

您需要让浏览器有机会计算高度并应用它。例如致电setTimeout。这将使浏览器有机会计算高度。

可能是一个零毫秒的时间间隔可行。这是因为如果需要，调用offsetHeight会触发布局重新计算（请参阅here）。

这是一个普遍问题，不是框架特定的，它只是浏览器的工作方式。总的来说，尽可能避免这种逻辑（等待高度稳定到X），它往往很难解决问题。

来源

2016-01-05 22:42:30

尝试的功能ngAfterViewInit

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

，是你的div HTML喜欢它？否则，你可能会考虑id后除去空间：

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

来源

2016-01-05 15:42:21 PierreDuc

ngOnInit（）也得到0. –

那么，如果容器的div没有固定的高度。高度100％不会工作 – PierreDuc

不应该是'ngAfterViewInit（）'？ –

这似乎是工作

在视图

<results-control></results-control>

在组件

import {Component,ViewChild,ElementRef} from '@angular/core'; 

@Component({ 
    selector: 'results-control', 
    template: '<div #resultsControlContainer> ... </div>' 
}) 
export class ResultsControl { 

    @ViewChild('resultsControlContainer') resultsControlContainerEl: ElementRef; 

    ngAfterViewInit() { 
     var height = this.resultsControlContainerEl.nativeElement.offsetHeight; 
     console.log(height); 
    } 
}

来源

2016-08-06 21:19:34 i8abug

尝试ionViewDidEnter

查看生命周期挂钩幸运的是，离子包一组视图生命周期挂钩到NavController中所述离子模块的一部分。他们遵循的事件处理程序的四种模式：

ionViewLoaded的工作方式为ngOnInit相同，火灾一旦当视图最初加载到DOM

ionViewWillEnter和ionViewDidEnter 是的钩子在有问题的页面变为活动状态之前和之后可用

ionViewWillLeave和ionView DidLeave是挂钩是可用之前和之后的页面离开视

ionViewWillUnload和ionViewDidUnload是挂钩可用前后页从DOM

https://webcake.co/page-lifecycle-hooks-in-ionic-2/

删除后

来源

2016-08-07 14:20:19 nottinhill

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

回答

相关问题