Javascript 角度：表达式更改最终结果检查错误

我的angular应用程序结构为页眉、主页眉和页脚，并由div包围。 根据收割台的高度（它是响应性的），我必须在周围的div上设置一个填充顶部

为此，我向我的header.component添加了一个名为height的输入参数，我从app.component传递了该参数。 在窗口上：调整大小我将此参数的值设置为“视线外的元素”，并发出此更改，以便app.component能够识别它。 我还设置了高度ngOnInit以提供初始高度

除了我在控制台中遇到的错误外，这一点非常有效：

AppComponent.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '160'.
  at viewDebugError (core.js:9514)
  at expressionChangedAfterItHasBeenCheckedError (core.js:9492)
  at checkBindingNoChanges (core.js:9661)
  at checkNoChangesNodeInline (core.js:13672)
  at checkNoChangesNode (core.js:13646)
  at debugCheckNoChangesNode (core.js:14454)
  at debugCheckDirectivesFn (core.js:14356)
  at Object.View_AppComponent_0._co [as updateDirectives] (AppComponent.html:2)
  at Object.debugUpdateDirectives [as updateDirectives] (core.js:14338)
  at checkNoChangesView (core.js:13486)

有人能帮我解决这个错误吗

app.component.html

<div id="stage" [style.padding-top.px]="this.headerHeight">
  <app-header [(height)]="this.headerHeight"></app-header>
  ...
</div>

...

标题.component.ts

import { Component, ElementRef, Input, Output, EventEmitter, OnInit, HostListener } from '@angular/core';
import { OverlayComponent } from './../overlay/overlay.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
  @Input() height: number;
  @Output() heightChange: EventEmitter<number> = new EventEmitter<number>();

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    this.changeHeight()
  }

  @HostListener('window:resize')
  changeHeight(): void {
    this.height = this.el.nativeElement.offsetHeight;
    this.heightChange.emit(this.height);
  }
}

从'@angular/core'导入{Component，ElementRef，Input，Output，EventEmitter，OnInit，HostListener}；
从“/../overlay/overlay.component”导入{OverlayComponent}；
@组成部分({
选择器：“应用程序标题”，
templateUrl:'./header.component.html'，
样式URL:['./header.component.scss']，
})
导出类HeaderComponent在Init上实现{
@输入（）高度：数字；
@Output（）heightChange:EventEmitter=neweventemitter（）；
构造函数（私有el:ElementRef）{}
ngOnInit（）：void{
此参数为0.changeHeight（）
}
@HostListener（'窗口：调整大小'）
changeHeight（）：void{
this.height=this.el.nativeElement.offsetHeight；
this.heightChange.emit（this.height）；
}
}

Angular不喜欢在调用

ngonit（）

时更改模型。
在更改后显式调用更改检测以消除错误

导出类HeaderComponent实现OnInit{
@输入（）高度：数字；
@Output（）heightChange:EventEmitter=neweventemitter（）；
构造函数（私有cdRef:ChangeDetectorRef，私有el:ElementRef）{}
ngOnInit（）：void{
此参数为.changehight（）；
this.cdRef.detectChanges（）；//似乎比在
setTimeout
中包装
this.changeHeight（）
更干净。还有其他优点吗？
setTimeout
在整个应用程序上运行更改检测，
detectChanges
仅在组件（及其子体）上运行。谢谢。在这种情况下，它看起来像
changeHeight（）
通知父级新高度。如果只更新当前组件和子级，该高度是否仍然有效？对，错过了该高度。我不清楚EventEmitter在
ngOnInit（）中发出事件时会发生什么
。在这种情况下，最好使用
setTimeout
。应该很容易找到它是否与
detectChanges
一起工作。因为您需要通知父级高度，所以将
setTimeout
环绕
此。changeHeight（）
应该会再次触发更改检测。@GünterZöchbauer有一个很好的解决方案，但我不确定它是否只会更新当前组件及其子组件。请阅读并告诉我们不清楚的地方