Question

我需要从我的子组件中获取父组件（基本布局）中定义的内容<div>的offsetHeight，这样我就可以创建另一个<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>

子组件打字稿：

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

要获得父级，您需要使用在构造函数中声明的属性，如下所示：

this.elRef.nativeElement.parentElement.offsetHeight;

Answer 2

正如我在文章中所说的那样，您可以使用CSS轻松完成此操作，但您说您想要访问父元素：

您可以通过访问parentNode nativeElement这样的ChildComponent来完成此操作（简化）：

constructor(private elRef:ElementRef) { 
}

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

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

希望它有所帮助。

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

2 个答案: