Angular登录后登录页与仪表盘同时显示不消失问题求助

• 根因就是<app-login>组件未添加显示条件，无论登录状态如何都会始终渲染在页面中。你已经给仪表盘的内部模块加上了*ngIf="currentUser"的登录态判断，登录成功后currentUser有值，仪表盘正常渲染的同时登录组件也没有隐藏，就会出现两个页面同时展示的问题。

快速修复 #

直接给<app-login>添加取反的登录态判断即可，修改app.component.html中的对应代码：

<!-- 只有未登录时才显示登录组件 -->
<app-login *ngIf="!currentUser"></app-login>

<app-dashboard-layout [configuration]="configuration">
  <div container="sidePanel" *ngIf="currentUser">
    <app-navigation-side-panel [links]="links"></app-navigation-side-panel>
  </div>
  <div container="navigationBar" *ngIf="currentUser">
    <app-navigation-bar></app-navigation-bar>
  </div>
  <div container="mainContent">
    <div *ngIf="currentUser">
      <a style="color: black" (click)="logout()">Logout </a>
      <router-outlet></router-outlet>
    </div>
  </div>
</app-dashboard-layout>

注意事项 #

• 要确保currentUser的赋值可以触发Angular变更检测：如果是普通类型变量，登录成功后直接赋值即可生效；如果是RxJS Observable类型，需要搭配async管道使用，修改为*ngIf="!(currentUser$ | async)"。
• 更规范的实现可以搭配Angular路由守卫：将登录页和仪表盘拆分为独立路由，未登录时拦截所有路由跳转至登录页，登录成功后跳转至仪表盘路由，避免所有组件都堆叠在根组件模板中，后续维护性更高。

内容的提问来源于stack exchange，提问作者user17236717