angular - 在 ngAfterViewInit 生命钩子上返回 Angular 9 不正确的元素高度

Question

我正在尝试在 ngAfterViewInit 生命钩子上获取标题的高度。Chrome 说高度是 172 像素（这是正确的），但我的代码说高度是 142 像素（有时是 140 像素）。

头组件.ts

import { Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit{

@ViewChild('headerIdentifier', {read: ElementRef, static:true}) elementView: ElementRef;
contentHeight: number;

ngAfterViewInit(): void {
   this.contentHeight = this.elementView.nativeElement.offsetHeight;
   console.log(this.contentHeight)
 }
}

应用组件.html

<div class="main_wapper">
<app-header></app-header>
<app-baner></app-baner>
<section class="contentPart defineFloat">
<router-outlet></router-outlet>
</section>
<app-footer></app-footer>
</div>

appcomponent.ts 中没有代码。只是普通的组件类。

Answer 1

因此，在对 Angular 文章进行了大量研究之后。我现在必须想出一个技巧。

  setTimeout(() => { this.contentHeight = this.elementView.nativeElement.offsetHeight;
  console.log(this.contentHeight) }, 1000 )

我在 ngAfterViewInit 上等了 1 秒钟，它就像一个魅力。