ExpressionChangedAfterItHasBeenCheckedError beim Laden von Service

Question

Ich versuche, ein loading Spinner auf jeder http.get Aktion in meiner App hinzuzufügen.

Hier ist meine http.get:

protected get(url: string): any { 

    //Loading start 
    this.sessionService.showLoader(); 
    (...) 
} 

Die SessionService meinen Anruf LoadingService:

constructor(private cookieService: CookieService, private loadingService : LoadingService) { 

} 

public showLoader(): void { 
    this.loadingService.show(); 
} 

public hideLoader(): void { 
    this.loadingService.hide(); 
} 

hier ist mein Service LoadingService

import { Injectable, OnInit, EventEmitter } from '@angular/core'; 

@Injectable() 
export class LoadingService implements OnInit { 


    public loadingEvent: EventEmitter<boolean>; 


    constructor() { 
    this.loadingEvent = new EventEmitter(); 
    } 

    ngOnInit() { 
    this.loadingEvent.emit(false); 
    } 


    show() { 
    this.loadingEvent.emit(true); 

    } 

    hide() { 
    this.loadingEvent.emit(false); 
    } 

} 

Dann ist hier ein Teil Meine Hauptlayoutkomponente:

showLoadingDiv : boolean; 

    constructor(public loadingService : LoadingService) { 
    } 

    ngOnInit() { 

    } 


    ngAfterViewInit(){ 
    this.loadingService.loadingEvent.subscribe((res) => { 
     this.showLoadingDiv = res; 
    }); 
    } 

Und schließlich in meiner HTML-Layout-Vorlage:

<div class="loaddiv" *ngIf="showLoadingDiv"> 
Loading... 
</div> 

Wenn andere Module Last schnell, ich habe nicht den Fehler ExpressionChangedAfterItHasBeenCheckedError aber Wenn ein Modul eine wenig Zeit in Anspruch nehmen (weil große Daten), Ich habe diesen Fehler.

Ich sehe das schon so, aber nicht für mich arbeiten: https://stackoverflow.com/a/38846793/1729211

Answer 1

Der Fehler tritt auf, wenn der Wert im Lebenszyklus Haken ngAfterViewInit ändern. Der schnelle Weg, um es zu beheben, würde den Code in Ihrem .subscribe in setTimeout() verpacken. Es gab einen guten Artikel, der das ausführlich erklärte, aber ich kann es nicht auf meinem Handy finden, vielleicht kann es jemand anderes posten.