Wie zeigt Menü aus verschiedenen Komponenten in Angular 4

Question

In meiner app Komponente Ich habe drei Komponenten-

app.component.html

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

In meiner app-header Komponente Ich habe ein verstecken Navigationsleiste mit einem Navigationslink, ich möchte einige Link-Basis auf Benutzer Login-Status zu verbergen.

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> 

Ich bin ein Token auf LocalStorage zu speichern, wenn die Benutzeranmeldung, so Wenn dieses Token einen gewissen Wert haben, dann ich Login ausblenden möchten und registrieren Link aus app-header component. Wie kann ich dies erreichen, weil diese Verbindung in der Heder-Komponente ist. Und ich speichere Token in verschiedenen Komponenten

Bitte schlagen Sie vor, wie kann ich dies erreichen.

Answer 1

Sie können es mit ngIF tun.

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

oder

Sie können eine Variable in Ihrer Komponente deklarieren, überprüfen die mit localStorage.getItem ("Token"). basierend auf zuweisen dies wahr oder falsch.