基于用户类型的角度4动态头文件

我想实现一个动态头文件组件，它根据用户角色进行更改。基于用户类型的角度4动态头文件

这里是我的头组件

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>

但问题是

登录后，即标题文本没有变化（不更改登录 - >注销）
注销后，该标题文本不会改变（不改变注销 - >登录）
但它更改标题文本，如果我刷新页面。但不会自动改变路线

任何人都可以帮助我吗？

来源

2017-10-19 Achira Shamal

它是什么样的用户对象 –

您设置此。 currentUser只有localStorage的值一次。当用户登录/注销时，可能会更改存储器中的值，但组件不会再次读取该值。您可以使用EventEmitter作为此服务或共享服务。 –

可以解释我如何使用共享服务来实现它 –

你需要让HeaderComponent知道认证状态已经改变。在登录时

介绍isAuthenticated$观察到的内部AuthService
注入在HeaderComponent该服务，并使用isAuthenticated$在模板中，以异步管
：你可以使用一个可观察此/ out，请致电next()关于该可观察点以触发更改

这样的事情应该做的工作：

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>

来源

2017-10-19 12:27:35

这种方法不适用于我的问题。因为我真的需要使用'currentuser'对象来检查条件。由于有多个用户类型，我需要根据这些用户类型动态更改标题。 –

然后，您可以订阅'isAuthenticated $'，并在其更改时更新'currentUser'。将更新我的答案。 –

或者，您可以使用'currentUser $'observable以相同的方式。 –

请使用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>`

来源

2017-10-19 12:26:25

基于用户类型的角度4动态头文件

回答

相关问题