ExpressionChangedAfterItHasBeenCheckedError:无法检测

我有一个角度4应用程序。

这个 应用程序。组成部分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_组件服务,它在标题、右菜单和左菜单的值发生变化时发出一个事件。

管理组件服务方法

     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;
    }

}

 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。NG工厂。js:40错误: 检查后。上一个值:“未定义”。当前值: “false”。

我知道我与改变决定有关,但不知道如何纠正这一点。