Comment cacher le menu show de différents composants dans angulaire 4

Question

Dans mon composant application que j'ai trois component

app.component.html

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

Dans mon app-header composante j'ai barre de navigation avec un lien de navigation, je veux cacher-montrer une base de liens sur l'état de connexion de l'utilisateur.

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> 

je stocke un jeton sur LocalStorage lors de la connexion de l'utilisateur, donc si ce jeton ont une certaine valeur, alors je veux cacher login et lien de registre app-header component. comment puis-je obtenir ceci parce que ces liens sont dans le composant heder. Et je stocke le jeton dans le composant différent

Veuillez suggérer comment je peux réaliser ceci.

Answer 1

Vous pouvez le faire en utilisant ngIF.

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

ou

Vous pouvez déclarer une variable dans votre composant, vérifiez la avec localStorage.getItem ("token"). basé sur l'attribution de ce vrai ou faux.