Question

如何在视图html中隐藏管理员链接。我必须警惕：管理员和经理

路由器配置：

{
   path: 'manager',
   component: ManagerComponent,
   canActivate: [ManagerGuard]
},
{
   path: 'user',
   component: UserAdminComponent,
   canActivate: [AdminGuard]
}

在视图中：

 <li>
    <a routerLink="/user" routerLinkActive="active-link">User</a>
 </li>

我想在管理员显示时隐藏/用户的管理员。

Answer 1

在我看来，这与路由器本身无关。

您的警卫可能会拨打另一项服务，其中包含有关登录哪种用户的信息：管理员或经理。

您应该创建一个知道用户类型的服务。然后将此服务与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。

Answer 2

如果已经以可能有用的方式回答，我在这里使用了另一种方法。由于您已经在Guard中使用了canActivate方法，因此您还可以使用该Guards注入导航组件，并且可以直接调用这些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'之类的变量，它必须是公共的 - 而不是私有的。

如何通过guard2隐藏链接

2 个答案: