0

我反复遇到一个问题，我认为这与我的 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一些东西。我不确定。我该如何解决这个问题？

4

2 回答 2

1

我解决了！这个问题正是我的想法，但无法让它工作，但现在它工作了！！

如何使用 *ngIf 其他？

这是解决方案：

<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>

呜呜呜！

于 2021-06-06T10:39:34.107 回答
0

我的建议是使用警卫。

然后，您可以将用户重定向到登录页面或经过身份验证的页面，具体取决于用户是否存在（已通过身份验证）。

于 2021-07-01T20:22:21.180 回答