Question

我想在我的角度项目中使用* 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>时间），系统将显示登录页面，并突然显示当前页面。

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

在isLog（）返回有效值之后，它表示true。然后显示仪表板。

但是我想避免这种情况。用户登录到系统后，我什至不想显示登录页面。因为用户感到困惑。

如何避免这种情况？是否有任何可能的方式来处理此类问题？或推荐的方式？

Answer 1

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

此外，作为补充，使用username=myaccount url = 'https://www.twitter.com/'+username url='https://twitter.com/PMOIndia/status/1143820980604694528' r = requests.get(url) soup = BeautifulSoup(r.content,'html.parser') x=soup.findAll('p',{'class':'TweetTextSize'}) for y in x: print(y.text)也不是一个好方法。您可以尝试将*ngIf="isLog()"放在console.log中，您会看到它会定期触发。这是因为isLog()的角度循环对分配给change Detection的所有表达式都有效，并且由于template具有与之关联的功能，该功能（*ngIf）得以执行。

最好在isLog()上评估此值并为其分配一些变量，该变量将用作检查ngOnInit条件的标志

Answer 2

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

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

如何正确使用* ngIf？

2 个答案: