Как применить 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.

Затем, если один из них активен, он добавит активный класс.

Так я заканчиваю с этим решением: использование isAdminPage в AdminService внутри AdminGuard.

@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>