如何获取 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()，但它们不起作用。

渲染后如何获取元素的height/width？

Answer 1

尝试函数ngAfterViewInit

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

你的 div HTML 是这样的吗？否则，您可以考虑删除 id:

之后的 space

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

Answer 2

你要的是Angular处理完事件生命周期，编译html注入到页面，浏览器渲染完html.

只有在稳定的时候才需要高度，之前不需要。问题是在 Angular 放弃 Javascript VM 轮次之后所做的一切，并且没有 "browser finished rendering" 或 "layout calculated" 事件。

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

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

这是一个普遍问题，不是特定于框架的，它只是浏览器的工作方式。一般这种逻辑还是尽量避免（等身高稳定了再做X），容易造成问题难以解决。

Answer 3

这似乎有效

在视图中

<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);
    } 
}

Answer 4

尝试ionViewDidEnter

View Lifecycle Hooks 还好Ionic封装了一套view 生命周期挂钩到 NavController——Ionic 模块的一部分。它们遵循四种事件处理程序模式：

ionViewLoaded works the same way as ngOnInit, fires once when the view is initially loaded into the DOM

ionViewWillEnter and ionViewDidEnter are hooks that are available before and after the page in question becomes active

ionViewWillLeave and ionViewDidLeave are hooks that are available before and after the page leaves the viewport

ionViewWillUnload and ionViewDidUnload are hooks that are available before and after the page is removed from the DOM

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

Answer 5

AfterViewChecked 和 ngIf 的事件对我有用。每次更新 DOM 时都会触发事件 AfterViewChecked 事件。此外，可以将高度发送到子组件。

如 Angular 文档所述：

Respond after Angular checks the component's views and child views / the view that a directive is in.

Called after the ngAfterViewInit() and every subsequent 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>

如何获取 DOM 元素高度？

How to get DOM element height?

ionic2

angular