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

Question

我正在开发一个在 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;
  }
}

Answer 1

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

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>