linkActive를 여러 링크에 적용하는 방법은 무엇입니까?

Question

나는 ngrx/router을 사용하고 있습니다.

4 페이지가 있습니다. 그리고 그 중 두 개는 /admin/dashboard과 /admin/management에 관리자 권한이 필요합니다.

/home 
/products 

/admin/dashboard 
/admin/management 

나는 사용자 또는 관리자보기 사이를 전환 할 수 사용자 및 관리을 클릭 할 수 있습니다.

<li linkActive="active"> 
    <a linkTo="/home">User</a> 
</li> 
<li linkActive="active"> 
    <a linkTo="/admin/dashboard">Admin</a> 
</li> 

나는 /home과 /products에, 나는 사용자가 활성화하려는 경우. 현재는 /home에있을 때만 활성화됩니다. 유사

, 내가 /admin/dashboard 및 /admin/management에, 나는 관리자가 활성화합니다. 현재는 /admin/dashboard 일 때만 활성화됩니다.

어떻게하면됩니까? 감사합니다.

Answer 1

@brandonroberts의 도움에 감사드립니다.

활성 링크 경로에 기초하므로 /home/products과 동시에 활성화되지 있다.

/home 및 /products에 대한 링크가 동일하지 않은 한 li입니다.

그런 다음 활성화 된 클래스 중 하나가 활성 클래스를 추가합니다.

그래서 나는이 솔루션을 종료 : AdminGuard의 내부 AdminService에 isAdminPage를 사용하여.

@Injectable() 
export class AdminService { 
    isAdminPage: boolean = false; 
} 


@Injectable() 
export class AdminGuard implements Guard { 
    constructor(
    private _router: Router, 
    private _userService: UserService, 
    private _adminService: AdminService) {} 

    protectRoute(candidate: TraversalCandidate): Observable<boolean> { 
    return this._userService.checkAdmin() 
     .map(isAdmin => { 
     if (!isAdmin) { 
      this._router.replace('/home'); 
      return false; 
     } else { 
      this._adminService.isAdminPage = true; 
      return true; 
     } 
     }).first(); 
    } 
} 

그리고 감지 _adminService.isAdminPage를 사용

<li class="nav-item" [class.active]="!_adminService.isAdminPage"> 
    <a class="nav-link" linkTo="/home">user</a> 
</li> 
<li class="nav-item" [class.active]="_adminService.isAdminPage"> 
    <a class="nav-link" linkTo="/admin/dashboard">admin</a> 
</li>