如何在Angular中隐藏零部件菜单

Question

我正在开发一个登录页面，我不想在这个页面中显示我的菜单。当前正在调用应用程序组件中的组件菜单。我想知道隐藏它的最佳做法是什么。

<app-toolbar></app-toolbar>         
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<router-outlet></router-outlet>
</div>
</div>

谢谢！

Answer 1

对我来说，我只是在菜单栏元素上做了一个*ngIf。ngIf引用了一个函数，该函数将检查用户是否已登录。

getLoggedInStatus() {
if (localStorage.getItem('userToken') != null) {
return true;
}
else {
return false
}
}

你可以看到，我正在检查本地存储中登录时设置的令牌

<div class="col hide-on-med-and-down l2 no-padding" *ngIf="getLoggedInStatus()">

还有一个带有if语句的菜单元素包装器。应该说，我不知道这是否是最好的做法，但我在写应用程序时还是新手，当我登录/验证时，我已经陷入了无法重写的困境

Answer 2

在Angular中隐藏/显示任何元素的最佳方法是使用*ngIf指令。请注意，组件/元素将根据您必须提供的条件进行隐藏/显示。