¿Cómo obtener la altura de Dom en angular2?

Solución:

Lo que desea es la altura de un elemento después de que Angular haya procesado los ciclos de vida del evento, haya compilado el html y lo haya inyectado en la página, y el navegador haya terminado de renderizar ese html.

Necesita la altura solo cuando sea estable, no antes. El problema es que todo eso se hace después de que Angular abandona el turno de VM de Javascript, y no hay un evento de “renderizado terminado del navegador” o “diseño calculado”.

Debe darle al navegador la oportunidad de calcular la altura y aplicarla. Por ejemplo llamar setTimeout. Esto le dará al navegador la oportunidad de calcular la altura.

Probablemente funcionaría un intervalo de cero ms. Esto se debe a que las llamadas a offsetHeight desencadenan un nuevo cálculo del diseño si es necesario (consulte aquí).

Este es un problema general y no es específico del marco, es solo la forma en que funcionan los navegadores. En general, es mejor tratar de evitar tanto como sea posible este tipo de lógica (espere hasta que la altura sea estable para hacer X), tiende a crear problemas difíciles de solucionar.

Prueba la función ngAfterViewInit

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

Y es tu div HTML como es? De lo contrario, podría considerar quitar el espacio después id:

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

El evento AfterViewChecked con ngIf trabajó para mi. El evento AfterViewChecked El evento se activa cada vez que se actualiza el DOM. Además, es posible enviar la altura a un componente secundario.

Como dice la documentación de Angular:

Responda después de que Angular verifique las vistas del componente y las vistas secundarias / la vista en la que se encuentra una directiva.

Llamado después de ngAfterViewInit () y cada ngAfterContentChecked posterior ()

Entonces el código se ve así:

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>

---

---

Utiliza Nuestro Buscador