Angular 9 在 ngAfterViewInit life hook 上返回了不正确的元素高度
Angular 9 incorrect element height returned on ngAfterViewInit life hook
我正在尝试在 ngAfterViewInit 生命挂钩上获取 header 的高度。
Chrome 说高度是 172px(这是正确的),但我的代码说高度是 142px(有时是 140px)。
Headercomponent.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)
}
}
appcomponent.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 中没有代码。只是普通组件 class.
因此,在对 angular 篇文章进行了大量研究之后。我现在必须想出一个破解方法。
setTimeout(() => { this.contentHeight = this.elementView.nativeElement.offsetHeight;
console.log(this.contentHeight) }, 1000 )
我在 ngAfterViewInit 上等了 1 秒,它非常有效。
我正在尝试在 ngAfterViewInit 生命挂钩上获取 header 的高度。 Chrome 说高度是 172px(这是正确的),但我的代码说高度是 142px(有时是 140px)。
Headercomponent.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)
}
}
appcomponent.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 中没有代码。只是普通组件 class.
因此,在对 angular 篇文章进行了大量研究之后。我现在必须想出一个破解方法。
setTimeout(() => { this.contentHeight = this.elementView.nativeElement.offsetHeight;
console.log(this.contentHeight) }, 1000 )
我在 ngAfterViewInit 上等了 1 秒,它非常有效。