1

我正在使用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，它才处于活动状态。

我怎样才能做到这一点？谢谢

4

1 回答 1

1

感谢@brandonroberts 的帮助。

活动链接是基于路径的，因此/home不能/products同时活动。

除非你有相同/home和/products下的链接li。

然后，如果其中一个是活动的，它将添加活动类。

所以我以这个解决方案结束：使用isAdminPagein AdminServiceinside of 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>
于 2016-06-04T03:22:34.473 回答