ユーザーの種類に基づいた角度4の動的ヘッダー

Question

ユーザーロールに基づいて変更される動的ヘッダーコンポーネントを実装しようとしています。ここで

は私のヘッダー・コンポーネント

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() { 

    } 

} 

ですこれは私のヘッダーテンプレート

<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> 

である。しかし、ログインした後に問題が

• あり、そのヘッダーテキストは（ない変更されていません ログイン→ログアウト）
• ログアウト後、そのヘッダーテキストは変更されません（ ログアウト - >ログイン）
• ただし、ページを更新するとヘッダーテキストが変更されます。しかし、ルート変更で自動的に変更されない

誰でも私にこれを助けることができますか？

Answer 1

を使用してください。このため、観察を使用することができます。ログイン時に

1. は

2. 非同期パイプで、HeaderComponentでそのサービスを注入AuthService

3. 内部に観察isAuthenticated$を導入し、テンプレート内isAuthenticated$を使用します/ out、を呼び出して変更をトリガーすることがわかります

このような

何かが仕事をする必要があります。

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); 
    } 

} 

ヘッダーコンポーネントコントローラを：

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; 
     } 
    }); 
    } 

} 

あなたのテンプレート：

<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

あなたはHeaderComponentは、認証ステータスが変更されたことを知らせる必要がありngのテンプレート

` <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>`