Как использовать разные навигационные панели для разных типов пользователей в Angular 5/4?

Question

Я работаю над бесплатным шаблоном Angular5, который я нашел на github. Он содержит только одну панель навигации, но в моем случае у меня есть 2 типа пользователей (администратор и менеджер), у которых вообще нет одинаковой панели навигации. Как я могу решить это? Как я могу перенаправить каждого из них на разные панели навигации?

Вот как выглядит шаблон:

На этом рисунке вы видите файл app-sidebar-nav.component.html, который использует файл _nav.ts, который содержит панель навигации.

Это файл _nav.ts

Я хочу добавить еще один файл с именем для примера _nav2.ts, который менеджер увидит после аутентификации, который отличается. И _nav.ts будет результатом, который администратор увидит после аутентификации.

В каталогах view / pages у меня есть файл с именем 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>