带有"*ngIf"的组件构造函数中的行为主体订阅会引发"ExpressionChangedAfterItHasBeenCheckedError"

Question

我在应用程序组件中有完整的UI，如果未登录，我只想显示登录屏幕。

我创建了一个 BehaviorSubject 并在 AppComponent Constructor 中订阅了它。

登录有效，但下一个更改(例如注销(引用：

错误

错误： 表达式已更改之后已检查错误： 表达式在检查后已更改。以前的值："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>

---

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

Answer 1

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

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

Answer 2

我有一个非常相似的情况，但我最终没有使用异步管道，而是通过在构造函数中注入changeDetectorRef: ChangeDetectorRef来修复它。然后在我更改订阅中的变量后，我调用this.changeDetectorRef.detectChanges()并修复了错误。