如何为用户登录设置 ngIf 条件 - app-container router-outlet
How to make ngIf condition for user login - app-container router-outlet
我反复 运行 遇到一个问题,我认为这与我 app.component.html 中的 ngIf 条件有关。这是我的代码:
<!-- nav -->
<div class="wrapper" *ngIf="user">
<div class="sidebar" >
<sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
<navbar-cmp></navbar-cmp>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
</div>
<!-- main app container -->
<div class="app-container" [ngClass]="{ 'bg-light': user }" *ngIf="!user">
<alert></alert>
<router-outlet></router-outlet>
</div>
这里有两个 ngIf 条件。
如果我只有第一个,那么当我注销时我无法重定向到我的登录屏幕。发生的是导航栏和侧边栏消失,但页面本身仍然存在,尽管 URL 表示它正在登录。路由器插座不会消失。
如果我只有第二个,那么我的侧边栏链接不起作用,路由器插座基本上是空白的。
如果我同时满足这两个条件,那么一旦登录并使用边栏,URL 会发生变化,但页面不会加载。
如果我没有这两个条件,那么导航栏和侧边栏会在它们不应该出现在登录屏幕上。
求助!
我还不是很精通Angular,所以我希望能在这里找到一些方向。
我最近的想法是要 *ngIf user; else
东西。我不确定。我该如何解决这个问题?
我解决了!这个问题正是我在想但无法解决的问题,但现在可以解决了!!
这是解决方案:
<div class="wrapper" *ngIf="user; else loggedOut">
<div class="sidebar">
<sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
<navbar-cmp></navbar-cmp>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
</div>
<ng-template #loggedOut>
<div class="app-container" [ngClass]="{ 'bg-light': user }">
<alert></alert>
<router-outlet></router-outlet>
</div>
</ng-template>
呜呜呜!
我的建议是使用守卫。
然后您可以将用户重定向到登录页面或经过身份验证的页面,具体取决于用户是否存在(已通过身份验证)。
我反复 运行 遇到一个问题,我认为这与我 app.component.html 中的 ngIf 条件有关。这是我的代码:
<!-- nav -->
<div class="wrapper" *ngIf="user">
<div class="sidebar" >
<sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
<navbar-cmp></navbar-cmp>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
</div>
<!-- main app container -->
<div class="app-container" [ngClass]="{ 'bg-light': user }" *ngIf="!user">
<alert></alert>
<router-outlet></router-outlet>
</div>
这里有两个 ngIf 条件。
如果我只有第一个,那么当我注销时我无法重定向到我的登录屏幕。发生的是导航栏和侧边栏消失,但页面本身仍然存在,尽管 URL 表示它正在登录。路由器插座不会消失。
如果我只有第二个,那么我的侧边栏链接不起作用,路由器插座基本上是空白的。
如果我同时满足这两个条件,那么一旦登录并使用边栏,URL 会发生变化,但页面不会加载。
如果我没有这两个条件,那么导航栏和侧边栏会在它们不应该出现在登录屏幕上。
求助!
我还不是很精通Angular,所以我希望能在这里找到一些方向。
我最近的想法是要 *ngIf user; else
东西。我不确定。我该如何解决这个问题?
我解决了!这个问题正是我在想但无法解决的问题,但现在可以解决了!!
这是解决方案:
<div class="wrapper" *ngIf="user; else loggedOut">
<div class="sidebar">
<sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
<navbar-cmp></navbar-cmp>
<div class="content">
<router-outlet></router-outlet>
</div>
</div>
</div>
<ng-template #loggedOut>
<div class="app-container" [ngClass]="{ 'bg-light': user }">
<alert></alert>
<router-outlet></router-outlet>
</div>
</ng-template>
呜呜呜!
我的建议是使用守卫。
然后您可以将用户重定向到登录页面或经过身份验证的页面,具体取决于用户是否存在(已通过身份验证)。