如何正确使用 *ngIf？

Question

我想在我的 Angular 项目中使用 *ngIf。我使用 app.component.html 来处理登录页面和仪表板。所以我想在用户登录网站之前隐藏仪表板。用户登录到系统后，我想显示仪表板。

所以我使用 *ngIf 来处理这个问题。我使用以下代码来处理此案。

在我的 app.component.html 中，我使用以下 div 来显示用户何时未登录系统。

<div class="login-page" *ngIf="!isLog()">

... go some code here...

</div>

以下 div 用于在用户登录系统后显示仪表板。

<div class="main-dashboard" *ngIf="isLog()">

... go some code here and router outlet as well ...

<router-outlet></router-outlet>

</div>

最后在我的 app.component.ts 文件中使用 isLog() 方法检查用户是否登录。

isLog(){
// Use to back end api to check user log
var log : boolean = false;
// If User is Log
// Use back end api to handle this
log = true;
return log;
} 

但问题是当用户第一次尝试登录系统时，此代码结构适用于这种情况。但是在用户登录系统后，如果用户刷新页面的时间很短（0.5 ms > time），系统会显示登录页面并突然显示当前页面。

我认为这是因为每次用户刷新页面时网站都会尝试检查用户是否登录。在此期间，isLog() 方法返回 false，因此网站显示当时的登录页面。

isLog() 返回有效值后表示为真。然后它显示仪表板。

但我想避免这种情况。用户登录到系统后，我不想在很短的时间内显示登录页面。因为用户感到困惑。

如何避免这种情况？有没有办法处理这类问题？？或者推荐的方式？？？

Answer 1

如果是这种情况，请尝试将此信息存储在 sessionStorage 中，这将保留该选项卡的数据，您无需等待服务器响应。

另外，作为旁注，使用*ngIf="isLog()" 不是一个好方法。您可以尝试将console.log 放入isLog()，您会看到它会定期触发。这是因为change Detection 的角度循环适用于分配给template 的所有表达式，并且由于*ngIf 具有与之关联的函数，因此执行该函数（isLog()）。

如果您可以在 ngOnInit 上评估此值并为其分配一些变量，该变量将用作检查 *ngIf 条件的标志，那就更好了

Answer 2

当然，这取决于您的需求，但最佳做法是让登录页面成为一个单独的组件，并使用 Route Guards 来保护路由。

如果将它放在同一页面中并使用 ngIf 足以满足您的要求，这意味着您的应用程序很小并且不太可能扩展，那很好。 @Shashank Vivek 在他的回答中很好地解释了您遇到的问题。