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

Question

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

这就是模板的样子：

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

这是_nav.ts文件

我想添加另一个名为exemple _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

您必须在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>