如何在 angular 中添加另一个组件，它具有与前一个组件相同的数据以及一些额外的信息

Question

我有一个 angular 应用程序，我使用 angular.And 创建了登录和仪表板页面，我还完成了登录和用户仪表板之间的导航，还调用了 API在仪表板中显示数据。

现在我的问题是我必须创建超级用户仪表板和管理员仪表板组件，这些仪表板与以前的用户仪表板具有相同的数据和一些额外的用户信息。（来自用户登录、超级用户登录、管理员登录它必须导航到特定的仪表板页面）

任何人都可以帮助我是否有必要为超级用户仪表板、管理仪表板创建另外两个组件并将用户仪表板组件数据复制粘贴到超级用户和管理仪表板组件中。

我是这个 angular 应用程序的新手，任何人都可以帮助我。

Answer 1

有几种方法可以解决这个问题，但我会做的是：

将仪表板组件分解为更小的组件，以便您以后可以在每个仪表板上重复使用它们，从而避免复制粘贴模板
从基本仪表板 class 继承每个其他仪表板 class，以便共享通用功能
使用 Angular 服务保存每个仪表板通用的数据，并将其注入您的仪表板组件。
为需要在这些组件上显示的额外数据创建超级用户仪表板和管理仪表板的服务

服务基本上是一个 class，angular 可以在运行时注入您的组件，通常用于存储在多个组件之间共享的数据更多关于 services

Answer 2

以下流程可行，但可能需要您掌握一些编码知识

通过添加函数 can()

AuthenicationService

当用户登录时，确保他们的信息和角色和/或权限保存在服务中，比如在界面中

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>

如何在 angular 中添加另一个组件，它具有与前一个组件相同的数据以及一些额外的信息

How to add the another component in angular and it has the same data as previous component and with some extra information on it

html

typescript

angular

angular8