Angular 4 en-têtes dynamiques basés sur le type d'utilisateur

Question

J'essaie d'implémenter un composant d'en-tête dynamique qui change en fonction du rôle de l'utilisateur.

Voici mon composant d'en-tête

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent implements OnInit { 
    currentUser:any; 
    constructor(

) { 
    this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 

    } 

    ngOnInit() { 

    } 

} 

Ceci est mon modèle d'en-tête

<nav class="navbar navbar-default" > 
<div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li class="menu_item" *ngIf="!currentUser"><a [routerLink]="['/login']"> Login </a></li> 
    <li class="menu_item" *ngIf="currentUser"><a [routerLink]="['/signin']">Logout</a></li> 
    </ul> 
</div> 
</nav> 

Mais le problème est

• après connecté, que le texte d'en-tête ne change pas (non changement connexion -> déconnexion)
• après la déconnexion, ce texte d'en-tête ne change pas (ne pas changer logout -> login)
• Mais cela change le texte de l'en-tête si je rafraîchis la page. Mais ne change pas automatiquement avec le changement d'itinéraire

Quelqu'un peut-il m'aider à ce sujet?

Answer 1

Vous devez laisser le HeaderComponent savoir que l'état d'authentification a changé. Vous pouvez utiliser un observable pour cela:

1. introduisons isAuthenticated$ observable à l'intérieur AuthService

2. injectent ce service dans HeaderComponent et utilisez le isAuthenticated$ à l'intérieur du modèle, avec tuyau async

3. lors de la connexion/out, appelez next() sur cet observable pour déclencher des modifications

Quelque chose comme cela devrait faire le travail:

class AuthService { 

    isAuthenticated$ = new BehaviorSubject<boolean>(false); 

    constructor() { 
     const authenticated = !!JSON.parse(localStorage.getItem('currentUser')); 
     this.isAuthenticated$.next(authenticated); 
    } 

    login() { 
     this.isAuthenticated$.next(true); 
    } 

    logout() { 
     this.isAuthenticated$.next(false); 
    } 

} 

contrôleur de composants en-tête:

class HeaderComponent implements OnInit { 

    public currentUser: any; 
    public isAuthenticated$ = this.auth.isAuthenticated$; 

    private (private auth: AuthService) {} 

    ngOnInit() { 
    this.isAuthenticated$.subscribe(authenticated => { 
     if (authenticated) { 
     this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
     } else { 
     this.currentUser = null; 
     } 
    }); 
    } 

} 

Votre modèle:

<nav class="navbar navbar-default" > 
    <div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="menu_item" *ngIf="!(isAuthenticated$ | async)"><a [routerLink]="['/login']"> Login </a></li> 
     <li class="menu_item" *ngIf="(isAuthenticated$ | async) && currentUser.someField === 'someValue'"><a [routerLink]="['/signin']">Logout</a></li> 
    </ul> 
    </div> 
</nav> 

Answer 2

S'il vous plaît utiliser ng-modèle

` <ul class="navbar-nav"> 
       <ng-template #anonymousUser> 
        <li class="nav-item"> 
        <a class="nav-link" routerLink="/login">Login</a> 
        </li> 
       </ng-template> 

       <li ngbDropdown *ngIf="appUser ;else anonymousUser " class="nav-item dropdown "> 
        <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        {{appUser.name}}</a> 
        <div ngbDropdownMenu class="dropdown-menu " aria-labelledby="dropdown01"> 
        <a class="dropdown-item" routerLink="/my/orders">My Orders</a> 
        <ng-container *ngIf="appUser.isAdmin"> 
         <a class="dropdown-item" routerLink="/admin/orders">Manage Order</a> 
         <a class="dropdown-item" routerLink="/admin/products">Manage Products</a> 
        </ng-container> 

        <a class="dropdown-item" (click)=logOut()>Log Out</a> 
        </div> 
       </li> 
       </ul>`