Подписка BehaviourSubject в конструкторе компонентов с "* ngIf" создает "ExpressionChangedAfterItHasBeenCheckedError"

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

Хотя эту ошибку можно рассматривать как предупреждение (она не будет отображаться в производственном режиме и, как правило, не наносит вреда вашему приложению), существуют способы избежать этого. Поскольку вы уже используете observable для выдачи статуса loggedIn, самый простой способ - использовать асинхронный канал.

Попробуйте сделать службу аутентификации общедоступной и используйте *ngIf="(authenticationService.loggedIn$ | async); else showLoginBox". Нет необходимости хранить логическое значение в вашем компоненте.