Angular 2 动态菜单加载和路由

Question

我正在尝试设计一个网站。用户可以具有不同的角色，例如管理员、经理或员工，这将在登录期间决定。其余 url 返回用户登录的类型。我想根据用户的类型动态加载视图。我的意思是动态地侧边栏必须加载特定于该用户的菜单，并且登录页面必须是动态的，具体取决于用户。请建议我如何操作或将我重定向到适当的资源。因为这是我没有的起点任何要附加的代码示例。请帮助。提前致谢。

更新

到目前为止，有一个登录组件，它将像这样重定向到我的主页

this.router.navigate(['/home']);

，主页菜单是从数据库中加载的

this.menuLoader.getFunctionalities(this.empId).subscribe(response => {
      this.roleArray=response;
      this.roleArray.forEach((element) => {
        this.funtionalities = element.functionList;
        console.log(element.functionList);
      });
    });//subscribe ends here
  }

在html中我有

<li *ngFor = "let x of funtionalities" (click)="closeSidenav()"> <a class="item white"  [routerLink] = "'/home'+x.FunctionValue">{{ x.FunctionName.toUpperCase()  }}</a></li>

我有类似的数据库结构

{
    "_id" : ObjectId("59676398506d3c2e58feb5d2"),
    "role" : "admin",
    "functionList" : [ 
        {
            "FunctionName" : "Create CFT",
            "FunctionValue" : "/createCFT"
        }, 
        {
            "FunctionName" : "Update CFT",
            "FunctionValue" : "/updateCFT"
        }, 
        {
            "FunctionName" : "Add Employee",
            "FunctionValue" : "/addEmployee"
        }, 
        {
            "FunctionName" : "Add Resource",
            "FunctionValue" : "/addResource"
        }, 
        {
            "FunctionName" : "Add Employees-Excel",
            "FunctionValue" : "/addEmployeesExcel"
        }, 
        {
            "FunctionName" : "Add Holiday List",
            "FunctionValue" : "/holidayList"
        }, 
        {
            "FunctionName" : "Add Employees to CFT",
            "FunctionValue" : "/addEmployeeToCft"
        }
    ]
}

Answer 1

您的functionList属性包含*ngFor修改中未使用的路由内容，如下所示，

<li *ngFor = "let x of funtionalities.functionList" (click)="closeSidenav()"> 
     <a class="item white"  [routerLink] = "'/home'+x.FunctionValue">
          {{ x.FunctionName.toUpperCase()  }}
     </a>
</li>