ngx-user-admin 是一个基于 Angular 的用户管理系统组件库，它提供了一系列的用户管理组件，适用于中小型企业的后台管理系统。在 ngx-user-admin 中，你可以快速地创建用户管理的增删查改功能，实现用户权限控制等功能，大大降低了开发成本。
基本要求
- Angular CLI 8.3.x 以上版本。
- Typescript 3.5.x 以上版本。
安装
执行以下命令安装 ngx-user-admin：
npm i ngx-user-admin --save
使用
要使用 ngx-user-admin，需要在你的 Angular 项目中引入该组件库并配置依赖。在你的模块（如 app.module.ts）中添加以下代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------
-----------
-------- -
----------------------------
-- ---
--
-- ---
--
------ ----- --------- - -在 NgModule 的 imports 中添加 NgxUserAdminModule 并将其导入，使用 forRoot 方法启用 ngx-user-admin 的默认配置。
示例
在使用 ngx-user-admin 前，需要先了解几个概念：
User：用户对象，包含用户的 ID、名称、邮箱、密码等信息。UsersService：用户服务，提供获取用户列表、新增用户、修改用户、删除用户等方法。
下面是一个简单的使用示例：
<ngx-user-admin-list></ngx-user-admin-list>
使用该代码片段可以快速地创建一个用户列表组件，该组件默认会加载 UsersService 中的全部用户信息。如果需要自定义数据源，可以在 ngx-user-admin-list 标签中添加输入参数 items，该参数的值应该是一个由 User 对象组成的数组。
<ngx-user-admin-list [items]="myUsers"></ngx-user-admin-list>
你可以通过继承 UsersService 来实现自己的用户服务，并绑定到 ngx-user-admin-list 中：
-- -------------------- ---- -------
------ - ------------ - ---- -----------------
-------------
------ ----- -------------- ------- ------------ - -
-----------
---------- -
- -------- ------------- --------- -------------- -
-- ---
--
-- ---
--
------ ----- --------- - -在这个示例中，我们继承了 UsersService 并修改了一些默认行为，同时把 UsersService 替换为新的 MyUsersService。
可定制化
ngx-user-admin 的样式、行为都是可定制化的。你可以根据自己的需求修改组件的样式、内容，改变其行为，甚至修改组件的源代码来实现自己的需求。
如果你想要修改组件的样式，最好的方法是通过导入 Sass 变量来修改样式。例如，如果你想要修改 ngx-user-admin-list 组件的背景颜色，可以在你的样式表中添加以下代码：
// my-styles.scss $ngx-user-admin-list-bg: #f2f2f2; @import '~ngx-user-admin/styles';
这样做的效果是，导入 ngx-user-admin/styles 时会首先加载 my-styles.scss 中的 Sass 变量，并在 ngx-user-admin/styles 中使用这些变量。
如果你想要修改组件的行为，建议通过继承相关的服务来实现。例如，如果你想要修改 ngx-user-admin-list 组件的默认查询行为，可以继承 UsersService，并重写 list 方法：
@Injectable()
export class MyUsersService extends UsersService {
list(params: object = {}): Observable<HttpResponse<User[]>> {
// 自定义查询逻辑
}
}这样做的效果是，当前模块中的 ngx-user-admin-list 将会使用新的 MyUsersService，从而实现自定义的用户列表查询逻辑。
总结
ngx-user-admin 是一个非常实用的组件库，它能够快速地帮助开发者实现用户管理的增删查改功能，提高开发效率。通过该组件库的使用，我们可以更加专注于业务逻辑的开发，而不是每次都手写用户管理功能。同时，我们也看到了 ngx-user-admin 的可定制化特性，它可以帮助我们应对不同的业务场景，做到个性化定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2c81e8991b448d7cdf