角度：ExpressionChangedAfterItHasBeenCheckedError

Question

私の角型アプリケーションは、divで囲まれたヘッダー、メイン、フッターで構成されています。 ヘッダーの高さに応じて（反応します）、周囲のdivにパディングトップを設定する必要があります。

これを行うには、app.componentから渡すheader.componentにheightという入力パラメータを追加しました。 ウィンドウ上で：resizeこのパラメータの値をoffsetHeightに設定し、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> 

header.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); 
    } 
} 

Answer 1

ngOnInit()が呼び出されたときにモデルが変化したときに角度が好きではありません。あなたが `` this.changeHeight（周りsetTimeout`を包む、高さの親に通知する必要があるので変更はエラー

export class HeaderComponent implements OnInit { 
    @Input() height: number; 
    @Output() heightChange: EventEmitter<number> = new EventEmitter<number>(); 

    constructor(private cdRef:ChangeDetectorRef, private el: ElementRef) { } 

    ngOnInit(): void { 
    this.changeHeight(); 
    this.cdRef.detectChanges(); // <<<=== added 
    } 

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