Angular 4动态页面加载器：ExpressionChangedAfterItHasBeenCheckedError

Question

I'm using a css loader on my root app.component.html with a ngIf :

<div *ngIf="displayPageLoader" class="page-loader-background">
    <div class="page-loader">
        <div class="loader2" style="font-size: 7px; top: -50px;">Loading...</div>
    </div>
</div>

When i need to display the loader, i'm calling the ToggleLoadersService service which tells the root component to change the variable displayPageLoader.

It works well but i keep getting this error on pretty much every page :

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'. 
    at viewDebugError (vendor.bundle.js:8687)
    at expressionChangedAfterItHasBeenCheckedError (vendor.bundle.js:8665)
    at checkBindingNoChanges (vendor.bundle.js:8829)
    at checkNoChangesNodeInline (vendor.bundle.js:12682)
    at checkNoChangesNode (vendor.bundle.js:12656)
    at debugCheckNoChangesNode (vendor.bundle.js:13431)
    at debugCheckDirectivesFn (vendor.bundle.js:13333)
    at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent.ngfactory.js:50)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:13315)
    at checkNoChangesView (vendor.bundle.js:12476)
    at callViewAction (vendor.bundle.js:12840)

Here's a scenario that toggles this error :

• User is on page 1.
• User clicks page 2 button : The page 1 component calls the ToggleLoadersService service to toggle on the loader and then redirects the user to page 2.
• User arrives on page 2.
• the page 2 calls the ToggleLoadersService service to toggle off the loader.

The error appears when the page 2 try to call the ToggleLoadersService service to toggle off the loader.

I am aware that there are other related subjects but they are not really helping me.

Any help would be appreciated. Thanks.

Answer 1

Try [hidden] as it only hide the element not remove it. it will not create an event but will be only available to UI