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

时间:2016-06-04 02:53:16

标签: typescript angular router ngrx

我正在使用 ngrx / router

我有4页。其中两个/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时,我希望管理员处于活动状态。现在只有在ld: framework not found DiskArbitration for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation) 时才有效。

我该怎么做?感谢

1 个答案:

答案 0 :(得分:1)

感谢@brandonroberts的帮助。

  

活动链接基于路径,因此/home/products无法生成   同时活跃。

     

除非您在同一/home下有/productsli的链接。

     

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

所以我以此解决方案结束:在isAdminPageAdminService内使用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>