Angular 4动态页面加载器：ExpressionChangedAfterItHasBeenCheckedError

Question

我在ngIf的根app.component.html上使用css加载器：

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

当我需要显示加载程序时，我正在调用ToggleLoadersService服务，该服务告诉根组件更改变量displayPageLoader。

它运作良好，但我几乎在每个页面上都收到此错误：

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)

这是一个切换此错误的方案：

• 用户在第1页。
• 用户单击页面2按钮：页面1组件调用ToggleLoadersService服务以切换加载程序，然后将用户重定向到页面2。
• 用户到达第2页。
• 第2页调用ToggleLoadersService服务以关闭加载程序。

当页面2尝试调用ToggleLoadersService服务以关闭加载程序时，将出现错误。

我知道还有其他相关主题，但它们并没有真正帮助我。

任何帮助，将不胜感激。 谢谢。

Answer 1

尝试[hidden]，因为它仅隐藏元素而不删除它。 它不会创建事件，但仅可用于UI