Angular 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;
}

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

编辑 - 使用父级作为输入

@Input() parent : HTMLElement;

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

Answer 2

这似乎对我来说在 ng17 中很有效。

我的具体场景是导航内容依赖于异步数据，我想为浮动导航设置

top

css 规则，而不对其进行硬编码。

我在尝试将值设置为属性时遇到了所有问题，因为“检查后表达式已更改”错误，或者 #content 在我的可观察对象或生命周期方法中尚不可用。

@Component({
    selector: "navbar",
    template: `
        <nav #content>
            <ul [ngStyle]="{ 'top.px': navElement?.nativeElement?.offsetHeight || 0 }">
                ...
            </ul>  
        </nav>
    `,
})
export class AccountNavbarComponent {
    @ViewChild("content") public navElement?: ElementRef;
}