angular - 如何从子组件中获取父组件中元素的 offsetHeight？

Question

我需要获取内容的offsetHeight <div>在子组件的父组件(基本布局)中定义，因此我可以制作另一个 <div>大小相同。

我尝试这样做，但得到 Cannot read property 'nativeElement' of undefined .

这是布局组件:

  <!-- Main content -->
  <div class="main" #mainContentArea>

    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      <app-breadcrumbs></app-breadcrumbs>
    </ol>

    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div><!-- /.conainer-fluid -->
  </div>

以及子组件 typescript :

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

export class PmsSyncComponent implements OnInit, AfterViewInit {

  constructor(
    private router: Router,
    private elRef:ElementRef
  ) { }

  @ViewChild('mainContentArea') elementView: ElementRef;
  ngOnInit() {
  }

  ngAfterViewInit() {
    alert(this.elementView.nativeElement.offsetHeighta);
  }

}

这可能吗？我需要使这个容器与内容区域的大小相同，以实现文件上传的拖放功能。

Answer 1

正如我在评论中所说，您可以使用 CSS 轻松做到这一点，但您说您想要访问父元素:

您可以通过访问 parentNode 来执行此操作nativeElement的您的ChildComponent像这样(简化):

constructor(private elRef:ElementRef) { 
}

ngAfterViewInit() {
    console.log(this.elRef.nativeElement.parentNode.offsetHeight);
}

确保在 ngAfterViewInit 中使用它。它仍然可以在 ngOnInit 中工作。但是如果您的父组件也有其他子组件，则可能会导致问题，因为它们不会同时初始化，并且您的 height可能会有所不同。

希望有帮助。