时间戳

首页 > 解决方案 > 如何在 Angular 5/4 中为不同类型的用户使用不同的导航栏？

angular - 如何在 Angular 5/4 中为不同类型的用户使用不同的导航栏？

问题描述

我正在开发一个在 github 上找到的 Angular5 免费模板。它只包含一个导航栏，但就我而言，我有两种类型的用户（管理员和经理），它们根本没有相同的导航栏。我该如何解决这个问题？如何将它们中的每一个重定向到不同的导航栏？

这是模板的样子：

在这张图片中，您可以看到文件 app-sidebar-nav.component.html 使用包含导航栏的文件 _nav.ts。

在此处输入图像描述

这是文件 _nav.ts

在此处输入图像描述

我想添加另一个名为 _nav2.ts 的文件，经理将在身份验证后看到，这是不同的。_nav.ts 将是管理员在身份验证后看到的结果。

在目录视图/页面中，我有一个名为 login.component.ts 和 login.component.html 的文件

编辑 ：

这是文件 authentication.service.ts

@Injectable()
export class AuthenticationService{

  private host:string="http://localhost:8080";
  private jwtToken=null ;
  private roles:Array<any>;
  private user:string;
  constructor(private http:HttpClient){

  }
  login(user){

    return this.http.post(this.host+"/login",user,{observe: 'response'});

  }

  getToken(){
    return this.jwtToken;
  }

  isAdmin(){
    for(let r of this.roles){
      if(r.authority=='ADMIN') return true;}
    return false;
  }

isManager(){
    for(let r of this.roles){
      if(r.authority=='MANAGER') return true;}
    return false;
  }
}

标签： angularangular-ui-routerangular5navbarangular-route-segment

解决方案

您必须添加一个userType可以在类中admin或类manager上的输入属性，AppSidebarNav稍微更改您的导入，例如：

import {navigation as adminNav} from './../../_nav';
import {navigation as managerNav} from './../../_nav2';

并在类中添加一个方法，该方法根据输入返回正确的信息：

class AppSidebarNav {
    @Input() userType = 'admin';

    get navItems(): any[] {
        return this.userType === 'admin' ? adminNav : managerNav;
    }
}

还要更新您的导航模板以使用navItems而不是navigation（因此它会跳转到新方法）。

然后您需要更新app-sidebar-nav包含此内容的模板以添加新userType属性，如下所示： <app-sidebar-nav [userType]="isAdmin ? 'admin' : 'manager'"></app-sidebar-nav>

推荐阅读