12 
<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()and ngAfterViewInit()，但它们不起作用。

渲染后如何获取元素的高度/宽度？

4

5 回答 5

16

您想要的是 Angular 处理完事件生命周期、编译 html 并将其注入页面以及浏览器完成呈现该 html 之后元素的高度。

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

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

可能零毫秒的间隔会起作用。这是因为如果需要，对 offsetHeight 的调用会触发布局重新计算（参见此处）。

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

于 2016-01-05T22:42:30.577 回答
5

试试这个功能ngAfterViewInit

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

你的divHTML 是这样的吗？否则，您可能会考虑删除之后的空格id：

<div style="width:100%;height:100%;position:relative;background-color:white" id="OuterSvg">
于 2016-01-05T15:42:21.470 回答
3

这个活动AfterViewChecked对ngIf我有用。AfterViewChecked每次更新 DOM 时都会触发event事件。此外，可以将高度发送给子组件。

正如 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>
于 2019-03-14T11:43:46.520 回答
2

这似乎有效

在视图中

<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-06T21:19:34.643 回答
0

尝试ionViewDidEnter

视图生命周期钩子 幸运的是，Ionic 将一组视图生命周期钩子打包到 NavController 中——Ionic 模块的一部分。它们遵循四种事件处理程序模式：

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

ionViewWillEnter 和 ionViewDidEnter 是在相关页面激活之前和之后可用的钩子

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

ionViewWillUnload 和 ionViewDidUnload是在页面从 DOM 中移除之前和之后可用的钩子

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

于 2016-08-07T14:20:19.983 回答