ExpressionChangedAfterItHasBeenCheckedError：无法检测

我有一个 Angular 4 应用程序。

The 应用程序组件.html看起来像这样

<!--The content below is only a placeholder and can be replaced.-->
<loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar>
<div class="app app-header-fixed" value="test">
    <app-header *ngIf="header" name="app_header"></app-header>

    <app-left-menu *ngIf="leftmenu" name="app_leftMenu"></app-left-menu>
    <div id="content" class="app-content abc_plain_wraper" role="main">
        <router-outlet></router-outlet>
    </div>

    <app-right-menu *ngIf="rightmenu"  name="app_rightMenu"></app-right-menu>

</div>

基本上在登录时它们是隐藏的，成功登录后它们在注销时再次可见，它们被隐藏。

为此，我有一个 mange_component 服务，它会在标题、右侧菜单和左侧菜单的值发生变化时发出事件。

管理组件服务方法

     import { Component, NgModule, VERSION, Injectable, Output, EventEmitter} from '@angular/core';
import { ComponentStatus } from '../model/component-status';
import { Observable } from 'rxjs/Rx';



@Injectable()
export class ManageComponentStatusService {
    @Output() OnChange: EventEmitter<any> = new EventEmitter();
    @Output() ManageHeader: EventEmitter<any> = new EventEmitter();

    componentStatus: any;

    constructor() {
        this.componentStatus = new ComponentStatus();
        this.componentStatus.header = false;
        this.componentStatus.leftMenu = false;
        this.componentStatus.rightMenu = false;
        this.componentStatus.plainHeader = true;
    }

    public setComponentStatus(header: any, left: any, right: any) {

        this.componentStatus.header = header;
        this.componentStatus.leftMenu = left;
        this.componentStatus.rightMenu = right;
        this.OnChange.emit(this.componentStatus);
    }

    public getComponentStatus(): Observable<any> {
        return this.OnChange;
    }

    public setPlainHeader(status:any) {

        this.componentStatus.plainHeader = status;
        var self = this;
        setTimeout(function () {
            self.ManageHeader.emit(self.componentStatus.plainHeader);
        }, 300);


    }

    public restoreHeader() {
        this.componentStatus.plainHeader = true;
    }

    public getHeaderStatus(): Observable<any>{
        return this.ManageHeader;
    }

}

在 app.component.ts 中，我们设置组件值，并通过订阅来检查更改

 export class AppComponent implements OnInit {

    title = 'test App';
    authSettings: any;
    appConstants: any;
    _router: any;
    header: any=false;
    leftmenu: any=false;
    rightmenu: any=false;
    compModel: any;


    constructor(private ngAuthService: NgAuthService, private tenantServ: TenantService,
        private loadingBarService: LoadingBarService, private router: Router,
        public manageComp: ManageComponentStatusService,public socialServ: SocialMediaSettingsService) {

        this._router = router;        
        this.authSettings = ngAuthService.getNgAuth();
        this.appConstants = ngAuthService.getAppConstant();
        //this.manageComp.setComponentStatus(false, false, false);


        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.loadingBarService.start();
                //console.log("navigation start");
            }
            else if (event instanceof NavigationEnd) {

                //console.log("navigation end");
                this.loadingBarService.complete();
            }


        });

        this.compModel = this.manageComp.getComponentStatus();

    }


    logOut() {
        this.manageComp.setComponentStatus(false, false, false);
        this._router.navigate(['login']);

    }

    ngOnInit() {

        //this.header = this.compModel.header;
        //this.leftmenu = this.compModel.leftMenu;
        //this.rightmenu = this.compModel.rightMenu;
        this._router.navigate(['login']);
        /*subscribing to change*/
        this.manageComp.getComponentStatus().subscribe(
            data => {
                this.header = data.header;
                this.leftmenu = data.leftMenu;
                this.rightmenu = data.rightMenu;
            });



    }
    ngOnChanges() {
        alert("change detected");
    }



}

登录成功后加载的路由是abc 下面是 abc 组件。我只添加相关部分

ngOnInit() {

        this.compStatus.setComponentStatus(true, true, true);//UPDATING HERE
        this.userServ.setUserProfile();
        this.compStatus.setPlainHeader(true);
        this.opts = {
            barBackground: '#C9C9C9',
            gridBackground: '#D9D9D9',
            barBorderRadius: '1',
            barWidth: '2',
            gridWidth: '1'
        };
        this.socialMediaData = this.socialSetServ.getSocialProvider();
        this.isContentEditable = this.commonServ.getAppConfig().contentEditable;        

    }

当登录页面加载时，我收到此异常。

ng:///AppModule/AppComponent.ngfactory.js:40 错误错误： ExpressionChangedAfterItHasBeenCheckedError：表达式已更改 检查完后。先前值：“未定义”。当前值： '错误的'。

我知道我与更改检测有关，但不知道如何纠正这个问题。

发生这个错误是因为变量的值之前改变了 变化检测可以对前一个进行检测。

解决这个问题的方法是使用 setTimeout 函数安排一个 然后，macrotask 将在下一个 VM 回合中执行。

你可以把这个代码this.compStatus.setComponentStatus(true, true, true); inside set Timeout

setTimeout(() => {
    this.compStatus.setComponentStatus(true, true, true);
}, 0);