Угловой 4 получить высоту элемента на родительском компоненте

Question

У меня есть демо здесь

У меня есть супер простой родительский компонент с дочерним компонентом.

Как узнать высоту родительского элемента div из дочернего компонента.

import { Component, Input, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})

export class ChildComponent implements OnInit {

  @Input() parent: ElementRef;

  @ViewChild("self")
  self: ElementRef;

  constructor(){

  }

  ngOnInit(){
    //console.log(this.parent.nativeElement.clientHeight);
    console.log(this.self.nativeElement.offsetTop);
  }

}

Answer 1

Вам необходимо использовать хук жизненного цикла AfterViewInit, поскольку представление не полностью инициализировано в NgOnInit, а высоты еще не будут рассчитаны.

ngAfterViewInit() {
    let parentHeight = this.self.nativeElement.offsetParent.clientHeight;
}

Лучшим способом было бы написать директиву, которую вы можете поместить в родительский элемент, который выводит ширину с помощью источника событий, а затем отправить эту ширину дочернему элементу в качестве входных данных. Мне не всегда повезло, когда я считал вычисленные свойства из «offsetParent» на nativeElement.

Редактировать - используя родителя в качестве ввода

@Input() parent : HTMLElement;

ngAfterViewInit() {
     console.log(this.parent.clientHeight);
}