Question

在我的app组件中，我有三个组件 -

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”）检查。基于分配这个真或假。

如何隐藏Angular 4

1 个答案: