如何在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>