Angular 4如何从子组件获取父组件元素高度

看起来你已经找对了方向——通过@Input传递父元素的引用，但有几个细节需要调整才能准确拿到父div的高度，我帮你梳理下完整的实现步骤：

第一步：父组件传递父div的引用 #

在父组件的模板里，给目标父div添加模板引用变量，然后把这个变量传给子组件的parent输入属性：

<!-- 父组件模板 -->
<div #parentContainer>
  <child-comp [parent]="parentContainer"></child-comp>
</div>

第二步：子组件调整代码逻辑 #

你当前在ngOnInit里尝试获取高度，这个时机太早了——此时父组件的视图可能还没完全渲染完成，拿到的clientHeight大概率是0。我们需要换到ngAfterViewInit钩子，这个阶段组件和父组件的视图都已经初始化完毕，能准确获取元素尺寸：

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

@Component({ 
  selector: 'child-comp', 
  templateUrl: './child.component.html' 
})
export class ChildComponent implements OnInit, AfterViewInit {
  @Input() parent: HTMLElement; // 直接声明为HTMLElement更贴合实际传递的类型
  @ViewChild("self") self: ElementRef;

  constructor(){ }

  ngOnInit(){ 
    // 这里不适合获取元素高度，视图还未完全渲染
  }

  ngAfterViewInit() {
    if(this.parent) {
      // clientHeight：获取元素内容+内边距的高度（不含边框、外边距、滚动条）
      console.log('父div高度（clientHeight）:', this.parent.clientHeight);
      // 如果需要包含边框，用offsetHeight
      // console.log('父div高度（offsetHeight）:', this.parent.offsetHeight);
      // 如果需要包含滚动内容的总高度，用scrollHeight
      // console.log('父div滚动内容高度:', this.parent.scrollHeight);
    }
  }
}

额外处理：监听父div高度的动态变化 #

如果父div的高度会随着内容加载、窗口调整等情况动态变化，上面的方法只能拿到初始高度。这种情况下可以用ResizeObserver来实时监听高度变化：

ngAfterViewInit() {
  if(this.parent) {
    const resizeObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        console.log('父div实时高度:', entry.contentRect.height);
      });
    });
    resizeObserver.observe(this.parent);
  }
}

这样不管父div的高度怎么变，子组件都能实时获取到最新值啦。

内容的提问来源于stack exchange，提问作者ttmt