각도 4를 사용하는 쿼리 매개 변수를 기반으로 메뉴 항목 표시

Question

역할 기반 메뉴를 사용하여 쿼리 문자열을 기반으로 메뉴 항목을 표시하고 있습니다. URL이 http://www.something.com/something?type=admin 인 경우처럼 관리자의 메뉴 항목 만 표시해야합니다. 하지만 내 논리는 모든 메뉴 항목을 숨기고 있습니다. 내가 다음 논리를 사용 예상대로 자신이 잘 작동 할 때 그것을 위해 난 내 header.component.ts

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"); 
     } 
    }); 
    } 

에서와 로직을 구현했습니다. 그러나 어떤 일이 발생하면 * ngIf = "type = admin"을 기반으로 메뉴 항목을 표시하거나 숨기려고하면 모든 메뉴 항목이 숨겨집니다. 내 템플릿 코드를 참조하십시오. 모든 메뉴 항목이 숨어있는 이유

header.component.html

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

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

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

아무도 나를 도울 수 있습니다.

Answer 1

나는 당신이 변화해야한다고 생각

<li routerLinkActive="active" *ngIf="'type' == 'admin';"> 

<li routerLinkActive="active" *ngIf="type == 'admin'"> 

(대신 하드 트링 '유형'의 변수 유형과 비교하고 또한 끝에 세미콜론을 제거

에 * ngIf , 필요하지 않습니다.)

Answer 2

이 기능은 모든 역할에서 잘 작동하지만 홈 페이지로 이동하면 모든 메뉴 항목이 숨어 있습니다.

<li routerLinkActive="active" *ngIf="type == 'admin'"> 
        <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/dashboard','_self')">Dashboard</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'national' || type == 'warrington' || type == 'subcontractorAdmin' || type == 'subcontractorManager'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/supplier-list','_self')">Suppliers</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/compliance-supplier-list','_self')">Compliance</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'subcontractorManager'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/admin-invoice-list','_self')">Invoicing</a> 
        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin'"> 
         <a href="javascript:void(0);" (click)="navigateExternal('http://www.something.com/internal-user-list','_self')">User Management</a> 

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

        </li> 
        <li routerLinkActive="active" *ngIf="type == 'admin' || type == 'national' || type == 'warrington' || type == 'subcontractorAdmin' || type == 'subcontractorManager'"> 
        <a routerLink="/searchsupplier">Search</a> 
        </li>