如何在 Angular 中隐藏组件菜单答案

【问题标题】：How to hide a component menu in Angular如何在 Angular 中隐藏组件菜单
【发布时间】：2020-07-29 03:35:37
【问题描述】：

我正在开发一个登录页面，但我不想在此页面中显示我的菜单。目前我正在调用 app-component 中的组件菜单。我想知道隐藏它的最佳做法是什么。

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

谢谢！

【问题讨论】：

标签： html css angular angular-material frontend

【解决方案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 语句的菜单元素包装器。应该说我不知道这是否是最佳实践，但我在编写我的应用程序时是新手，当我登录/身份验证时，我离兔子洞太远了，无法重新编写东西

【讨论】：

【解决方案2】：

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

【讨论】：