如何在视图 html 中隐藏管理链接。我要守护 :Admin 和 Manager
路由器配置：
{
path: 'manager',
component: ManagerComponent,
canActivate: [ManagerGuard]
},
{
path: 'user',
component: UserAdminComponent,
canActivate: [AdminGuard]
}
在视图中：
<li>
<a routerLink="/user" routerLinkActive="active-link">User</a>
</li>
我想在 /user 上为 ManagerGuard 隐藏链接，但为 AdminGuard 显示。
【问题讨论】：
标签： angular2-routing
在我看来，这与路由器本身无关。
您的 Guards 可能会调用另一个服务，该服务具有有关登录的用户类型的信息：管理员或经理。
您应该创建一个知道用户类型的服务。然后将这个带有Dependency Injection 的服务注入到您拥有routerLink 的组件中。
您可以在此处询问服务并使用*ngIf切换链接：
<li *ngIf="myService.getCurrentUser().isAdmin()">
<a routerLink="/user" routerLinkActive="active-link">User</a>
</li>
因此，该服务提供了一个函数，该函数为您提供当前登录的用户，并且用户的isAdmin()-函数返回true 或false。如果用户是管理员，则<li> 将显示，否则将被隐藏。
这只是一个例子，但我希望你明白这一点。它更多地与 Angular 2 的基本功能有关，而不是 Angular 2 的路由器。有关*ngIf 的更多信息可以找到here。
【讨论】：
此外，如果已经以可能有用的方式回答，我在这里使用了另一种方法。由于您已经在 Guard 中拥有 canActivate 方法，因此您还可以使用该 Guard 注入导航组件，您可以直接调用这些 canActivate 方法：
在包含导航的组件中
constructor(private adminGuard: AdminGuard)
然后在模板中
<li *ngIf="adminGuard.canActivate()">
<a routerLink="/user" routerLinkActive="active-link">User</a>
</li>
编辑
在我的情况下，这在 prod 模式下不起作用（如果您使用必须注入的参数）。我只是试图编译它，但角度抱怨缺少参数。如果您不使用参数，这可以正常工作，或者，如果您不使用函数中的参数 - 那么只需传递
<li *ngIf="adminGuard.canActivate(null,null)">
<a routerLink="/user" routerLinkActive="active-link">User</a>
</li>
另外一件事：如果你在模板中是像上面的'adminGuard'这样的变量，它必须是公共的——而不是私有的。
【讨论】：