Question

我在AppComponent中具有完整的用户界面，并且如果未登录，我只想显示登录屏幕。

我创建了一个BehaviourSubject并将其订阅到AppComponent构造函数中。

登录有效，但是下一个更改（例如注销）引用于：

错误错误：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>

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

Answer 1

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

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

带有“ * ngIf”的组件构造函数中的BehaviourSubject订阅将引发“ ExpressionChangedAfterItHaHasBeenCheckedError”

1 个答案: