如何隐藏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"(检查。基于分配此真或错误。