在angular 2中隐藏特定用户所需的菜单项

我已经创建了一个angular应用程序，其中有一个登录表单，在该表单中我使用服务和防护实现了身份验证

我定义了一个带有用户名和密码的界面用户。在authentication.service.ts中使用此界面，我定义了两个用户admin和user

我还实现了一个名为authentication.guard.ts的保护，我在其中使用CanActivaterouteGard将用户路由到他可以访问的页面

在我的应用程序中，有一个管理员页面，只有管理员用户才能访问该页面，因此，如果管理员只登录，它将导航到管理员页面。如果用户登录，他将被重定向到主页，跳过管理员页面

当管理员或用户登录到应用程序时，会出现一个菜单栏，其中有三个菜单项主页、AdminActivity、RegisterUser

如果admin登录到应用程序中，我试图隐藏AdminActivity菜单项，如果user登录到应用程序中，我试图隐藏RegisterUser菜单项

我试图在app.component.ts中导入身份验证服务，但无法获取记录的用户名和密码

有人能帮我实现我需要在应用程序中实现的功能吗

---

请访问我的示例应用程序

，因为您的stackbliz无法工作，但下面我想提供一些有用的代码：-

在routing.module.ts中，修改“管理员”路线

{路径：'Admin'，组件：AdminComponent，
数据：{
权限：['ROLE_ADMIN']，
},
canActivate:[AuthenticationGuard]}

更新了示例代码

用于跟踪用户类型并用于显示/隐藏菜单项。您可以使用它在整个应用程序的不同组件之间进行通信。我删除了一些在Stackblitz中导致错误的代码，但不要关注这些

认证服务的更改：

声明的

userType

为：

在登录中更新

userType

：

login(username, password) {
...
localStorage.setItem("user", this.user.username);
this.userType.next(this.user.username);

app.componet.ts中的更改：

订阅

userType

：

app.componet.html中的更改：

使用

*ngIf

显示/隐藏菜单项：

  <button *ngIf="userType === 'admin'" mat-raised-button routerLink='application/AdminAccess/admin-activity' routerLinkActive="active">Admin Activity </button>

  <button *ngIf="userType === 'user'" mat-raised-button routerLink='application/UserManagement/add-users' routerLinkActive="active">Register User</button>

管理活动
注册用户

Stackblitz链接不起作用。是的，我试图解决，但我有问题。请指导我如何实现该功能….？用户名是否保存在本地存储中？@AbdulRafay。。。。。对如authentication.service.ts中所示…………让authenticatedUser=users.find（u=>u.username==this.user.username）；如果（authenticatedUser&&authenticatedUser.password==this.user.password）{localStorage.setItem（“user”，this.user.username）；this._router.navigate（['/Admin']）；}感谢您的回复。。。当我修改authenticationguard.guard.ts时，会在控制台中导致以下错误。。。。。无法调用其类型缺少调用签名的表达式。类型“Boolean”没有兼容的呼叫签名。非常感谢您的反馈。。这正是我所需要的。。。我修改了我早期应用程序中的更改，其工作正常。。再次非常感谢。。

login(username, password) {
...
localStorage.setItem("user", this.user.username);
this.userType.next(this.user.username);

  userType: string = '';

  ngOnInit(){
    ...
    this.authService.userType.subscribe(value => this.userType = value);
  }

  <button *ngIf="userType === 'admin'" mat-raised-button routerLink='application/AdminAccess/admin-activity' routerLinkActive="active">Admin Activity </button>

  <button *ngIf="userType === 'user'" mat-raised-button routerLink='application/UserManagement/add-users' routerLinkActive="active">Register User</button>