如何将 linkActive 应用于多个链接？

Question

我正在使用 ngrx/router.

我有 4 页。其中两个 /admin/dashboard 和 /admin/management 需要管理员权限。

/home
/products

/admin/dashboard
/admin/management

我可以单击 User 和 Admin 在用户或管理员视图之间切换。

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

当我在 /home 和 /products 时，我希望 User 处于活动状态。现在只有在 /home 时才有效。

类似的，当我在/admin/dashboard和/admin/management时，我希望Admin处于活动状态。现在只有在 /admin/dashboard 时才有效。

我该怎么做？谢谢

Answer 1

感谢@brandonroberts 的帮助。

The active link is based on the path, so /home and /products can't be active at the same time.

Unless you have links for /home and /products under the same li.

Then if one of those it active, it will add the active class.

所以我以这个解决方案结束：在 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>

如何将 linkActive 应用于多个链接？

How to apply linkActive to multiple links?

router

typescript

ngrx

angular