使用“*ngIf”的组件构造函数中的 BehaviorSubject 订阅引发“ExpressionChangedAfterItHasBeenCheckedError”答案

【问题标题】：BehaviourSubject subscription in Component constructor with "*ngIf" throws a "ExpressionChangedAfterItHasBeenCheckedError"使用“*ngIf”的组件构造函数中的 BehaviorSubject 订阅引发“ExpressionChangedAfterItHasBeenCheckedError”
【发布时间】：2019-04-14 21:16:14
【问题描述】：

我在 AppComponent 中有完整的 UI，如果未登录，我只想显示登录屏幕。

我创建了一个 BehaviourSubject 并在 AppComponent 构造函数中订阅了它。

登录成功，但下一个更改（例如注销）参考：

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: true'。当前值：'ngIf: false'。

app.component.ts

export class AppComponent implements OnInit {

    isLoggedIn = false;

    constructor(private authenticationService: AuthenticationService) {
        this.authenticationService.loggedIn$.subscribe((res) => {
            this.isLoggedIn = res;
        });
    }

    ngOnInit(): void {
    }
}

app.component.html

<div *ngIf="isLoggedIn; else showLoginBox">
    <div class="container-fluid d-flex">
            <div id="main-content">
                <router-outlet></router-outlet>
            </div>
    </div>
</div>
<ng-template #showLoginBox>
    <app-login></app-login>
</ng-template>

如果未登录，我只想显示登录屏幕。

【问题讨论】：

我认为您提供的代码不会导致此错误。这是因为 in DEV mode, the angular Change detection(CD) is run twice to verify that all variables are in sync with what was informed to Angular in Previous CD 。发生的事情是您的 *ngIf 表达式在第一张 CD 被触发后被更改。它是一个错误，可能会在稍后阶段在您的应用程序中创建一些错误。参考：blog.angularindepth.com/…。另外，阅读changeDetectionRef.detectChanges()
@ShashankVivek ty 或者帮助和 A.Winnen，我通过这个解决了它

标签： angular typescript rxjs

【解决方案1】：

虽然这个错误可以被视为一个警告（它不会在生产模式中显示，并且通常对您的应用程序无害），但有一些方法可以避免这种情况。由于您已经使用 observable 来发出已登录状态，因此最简单的方法应该是使用异步管道。

尝试公开 authenticationService 并使用*ngIf="(authenticationService.loggedIn$ | async); else showLoginBox"。无需将布尔值存储在您的组件中。

【讨论】：