Question

我有一个演示here

我有一个带有子组件的超简单父组件。

如何从子组件中获取父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'生命周期钩子bc视图未在NgOnInit中完全初始化，并且尚未计算高度。

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

更好的方法可能是编写一个指令，您可以将该指令放在使用事件发射器输出宽度的父级上，然后将该宽度作为输入发送给子级。我并不总是很幸运从nativeElement上的'offsetParent'读取计算属性。

编辑 - 使用父作为输入

@Input() parent : HTMLElement;

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

Angular 4获取组件父级元素的高度

1 个答案: