基于角色的菜单项使用角度4和网址查询字符串

Question

我想根据用户角色显示菜单项，例如我有管理员，用户，经理等。所以我的问题是如何根据用户角色显示菜单项。我被给了http://www.example.com/searchsupplier?type=admin的网址。基于查询字符串type = admin我需要使用angular显示菜单项。意味着如果查询字符串具有type = admin，那么我需要显示Dashboard - Users - Others，如果type = user，那么我需要显示My Profile等。那么我该如何实现这一点。任何人都可以给我一个查询字符串的小例子。

我在组件

中尝试过的代码

ngOnInit() {
        this.route.queryParams
        .filter(params => params.type)
        .subscribe(params => {
            console.log(params); //{type: "admin"}
            this.type = params.type;
            console.log(this.type);

            if(this.type == "admin"){
                console.log("ADMIN PAGE");                
                    //this.router.navigate(['dashboard'], { queryParams: { type: this.type } });
                    this.router.navigate(['dashboard']);
            }else if(this.type == "national"){
                console.log("NATIONAL PAGE");
            }else if(this.type == "warrington"){
                console.log("WARRINGTON PAGE");
            }else if(this.type == "subcontractorAdmin"){
                console.log("SUB CONTRACOTR ADMIN PAGE");
            }else if(this.type == "subcontractorManager"){
                console.log("SUB CONTRACTOR MANAGER PAGE");
            }else{
                console.log("OTHERS PAGE");
            }
        });

但是我没有得到任何关于如何根据url查询字符串中的用户显示菜单项的线索。导航工作正常，但如何隐藏和显示基于角色的菜单项。

如果url查询字符串的参数为type = admin，那么我必须显示所有菜单项。

但是在header.component.html中，如何从url查询字符串中输入type = admin或type = national等。

<ul class="nav navbar-nav">
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                <a href="javascript:void(0);" (click)="navigateExternal('http://localhostL:4200/dashboard','_self')">Dashboard</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                  <a href="javascript:void(0);" (click)="navigateExternal('http:localhostL:4200/supplier-list','_self')">Suppliers</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                  <a href="javascript:void(0);" (click)="navigateExternal('http:localhostL:4200/compliance-supplier-list','_self')">Compliance</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                  <a href="javascript:void(0);" (click)="navigateExternal('http:localhostL:4200/admin-invoice-list','_self')">Invoicing</a>
              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                  <a href="javascript:void(0);" (click)="navigateExternal('http:localhostL:4200/internal-user-list','_self')">User Management</a>

              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                  <a href="javascript:void(0);" (click)="navigateExternal('http:localhostL:4200/node/add/upload_weight_csv','_self')">Weight Ticket</a>

              </li>
              <li routerLinkActive="active" *ngIf="'type' == 'admin'">
                <a routerLink="/searchsupplier">Search</a>
              </li>

由于