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会触发布局重新计算（请参阅here）。

这是一个普遍的问题，并不是特定于框架的，它只是浏览器的工作方式。一般来说，最好尽量避免这种逻辑（等到高度稳定做X），这往往会造成难以解决的问题。

Answer 2

尝试功能ngAfterViewInit

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

您的div HTML是否合适？否则，您可以考虑删除id之后的空格：

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

Answer 3

这似乎有效

在视图中

.jumbotron {
  margin-bottom: 0;
}

在组件中

<results-control></results-control>

Answer 4

尝试ionViewDidEnter

查看Lifecycle Hooks幸运的是，Ionic打包了一组视图生命周期钩入NavController - Ionic模块的一部分。它们遵循四种事件处理程序模式：

ionViewLoaded 与ngOnInit的工作方式相同，在视图中触发一次   最初加载到DOM

ionViewWillEnter和ionViewDidEnter   是有问题的页面之前和之后可用的钩子   变得活跃

ionViewWillLeave和ionViewDidLeave 是钩子   在页面离开视口之前和之后可用

ionViewWillUnload和ionViewDidUnload 是可用的挂钩   页面从DOM中删除之前和之后

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

Answer 5

与AfterViewChecked一起的事件ngIf对我有用。每次更新DOM时都会触发事件AfterViewChecked事件。另外，可以将高度发送给子组件。

如Angular文档所述：

在Angular检查组件的视图和子视图之后响应/   指令所在的视图。

在ngAfterViewInit（）之后调用，并随后的每个ngAfterContentChecked（）

所以代码看起来像这样：

export class YourComponent implements AfterViewChecked {

    @ViewChild('fooWrapper') sidebarElementRef: ElementRef;

    ngAfterViewChecked() {
        this.divHeight = this.sidebarElementRef.nativeElement.offsetHeight;
    }
}

HTML：

<div #fooWrapper>        
    <fooComponent 
        *ngIf="divHeight > 0"
        [Height]="divHeight">
    </fooComponent>        
</div>

如何在棱角2中获得Dom的高度？

5 个答案: