我有一个angular应用程序，我已经使用angular创建了登录和仪表板页面。我还完成了登录和用户仪表板之间的导航，也被称为API，它显示仪表板中的数据。
现在我的问题是，我必须创建超级用户面板和管理面板组件，这些面板上有与以前的用户面板相同的数据和一些额外的用户信息
如果有必要为超级用户面板、管理面板创建另外两个组件，并将用户面板组件数据复制粘贴到超级用户和管理面板组件中，有人能帮我吗
我是这个角度应用程序的新手，有人能帮我吗。
有几种方法可以解决这个问题，但我要做的是：
- 将面板组件分解为更小的组件，以便以后在每个面板上重用它们，从而避免复制粘贴模板
- 从其他所有仪表板类上的基本仪表板类继承，以便共享通用功能
- 使用Angular服务来保存每个仪表板通用的数据，并将其注入到仪表板组件中
- 为超级用户面板和管理面板创建服务，以便在这些组件上显示额外的数据
服务基本上是一个类，angular可以在运行时注入到组件中，通常用于存储许多组件之间共享的数据更多关于服务
下面的过程可以工作，但可能需要对进行一些编码
- 通过添加函数
can()创建或更新AuthenicationService - 当用户登录时，确保他们的信息和角色&OR权限保存在服务中，类似于界面中
interface IUser {
id: number,
role: string,
permissions: string[],
// Other Properties here
}
- 将can函数更新为如下内容
can(permission: string) {
if(this.user.role === 'super admin') return true;
if(this.user.permissions.includes(permission) return true;
return false;
}
我们允许超级管理员进行所有访问，但对于其他用户，我们正在检查他们是否有权限执行
- 将身份验证服务注入仪表板组件，并为您需要限制的部分设置属性，例如超级管理员可以阻止用户
constructor (private authenticationService: AuthenticationService, ...) {}
canBlocUser = this.authenticationService.can('block user')
- 最后，在UI中，您可以简单地根据属性值显示或隐藏组件
<button *ngIf='canBlockUser'>Block User</button>