注銷時的 ExpressionChangedAfterItHasBeenCheckedError

Question

我的app.component.html有幾個這樣的鏈接：

<a *ngIf="!global.isLoggedIn()" routerLink="/account" routerLinkActive="active">Login</a>
<a *ngIf="global.isLoggedIn()" routerLink="/account-logout" routerLinkActive="active">Logout</a>

在app.component.ts我有這個：

constructor(private global: GlobalService, private route: ActivatedRoute) { }

在我的global.service.ts我有：

public isLoggedIn(): boolean {
    return this.authService.isLoggedIn();
}

在我的authhttp.service.ts我有：

public logout() {
    sessionStorage.removeItem(this.tokeyKey);
}

public isLoggedIn(): boolean {
    let token = sessionStorage.getItem(this.tokeyKey);

    return token != null;
}

在我的account.component.ts我有：

constructor(private router: Router, private authService: AuthHttpService, private global: GlobalService, private route: ActivatedRoute) { }

ngOnInit() {
    this.subscriptions.push(this.route.data.subscribe(data => {
        this.global.setMetaTitle(data.title);

        this.handleLogout(data.logout == true);
    }));
}

private handleLogout(isLogout: boolean) {
    if (isLogout) {
        this.authService.logout();

        this.router.navigate([""]);
    }
}

不確定它會有所幫助，但這是route ：

{ path: 'account-logout', component: AccountComponent, data: { title: 'Logout - My App', logout: true } },

根據我讀過的所有內容，這是因為我正在ngOnInit進行注銷交易，但我不確定如何處理它，除了創建一個LogoutComponent或更糟糕的是使用setTimeout hack，這些都不是是可取的……這里還有其他選擇嗎？

Answer 1

在 AppComponent 中，您必須在更改后顯式運行檢測：

constructor(pivate _changeDetectorRef: ChangeDetectorRef) { }
    ngAfterViewChecked(): void {
        this._changeDetectorRef.detectChanges();
}

記得從 angular core 導入它：

import { Component, ChangeDetectorRef, AfterViewChecked } from '@angular/core';