如何在Angular 4中隐藏来自不同组件的显示菜单

Question

在我的应用组件中，我有三个组件-

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

在我的app-header 组件中，我有一个带有一些导航链接的导航栏，我想根据用户登录状态隐藏-显示一些链接。

app-header.component.html

<nav>  
    <ul class="nav navbar-nav navbar-right" >

    <li><a class="white" routerLink="/register"> Register</a></li>

    <li><a class="white" routerLink="/login"> Login</a></li>

    <li (click)="onLogOut()"><span> LogOut</span></li>

  </ul>
 </nav>

当用户登录时，我在 LocalStorage 上存储了一个令牌，所以如果这个令牌有一些价值，那么我想隐藏来自 app-header component. 的登录和注册链接，因为这些链接在 heder 组件中，我该如何实现这一点。我将令牌存储在不同的组件中

请建议我怎样才能做到这一点。

Answer 1

您可以使用 ngIF 来做到这一点。

<app-header *ngIf != "localStorage.getItem("token") == ''"></app-header>

或

您可以在组件中声明一个变量，使用 localStorage.getItem("token") 检查。基于分配这个真或假。