Как получить высоту Dom в угловом2?

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(), но также не работает ... SO Как получить высоту/ширину элемента после отображения высоты dom?

Answer 1

Что вы хотите, высота элемента после Угловой обработал жизненный цикл событий, составили HTML и впрыскивают его на странице, а браузер закончил рендеринг, что HTML.

Вам нужна высота только тогда, когда она стабильна, а не раньше. Проблема в том, что все, что делается после того, как Angular отказывается от поворота Javascript VM, и нет события «обработанное завершение рендеринга» или «вычисленное макет».

Вам необходимо дать браузеру возможность рассчитать высоту и применить ее. Например, звоните setTimeout. Это даст браузеру возможность рассчитать высоту.

Возможно, будет работать интервал в 0 мс. Это связано с тем, что вызовы 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

Это похоже на работу

По мнению

<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

Просмотр Lifecycle Крючки К счастью, Ионные пакеты набор зрения крючки жизненного цикла в NavController часть модуля ионического. Они следуют четыре модели обработчиков событий:

ionViewLoaded работает точно так же, как ngOnInit, срабатывает один раз, когда представление сначала загружается в DOM

ionViewWillEnter и ionViewDidEnter крючки, которые доступны до и после указанной страницы

ionViewWillLeave и ionView DidLeave крючки, которые доступные до и после того, как страница выходит из окна просмотра

ionViewWillUnload и ionViewDidUnload крючки, которые доступны до и после того, как страница удаляется из DOM

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