介绍
Angular-ngrx-crud 是一个用于 CRUD 操作的 Angular 应用程序的 npm 包，使用了 ngrx 和 Angular Material。它为开发人员提供了一种快速构建和部署 CRUD 应用程序的方法，并能够在应用程序中实现极端的一致性。
功能列表
- 列出实体列表
- 显示实体明细信息
- 新建实体
- 编辑实体
- 删除实体
安装
使用 npm 安装：
npm install angular-ngrx-crud --save
安装依赖
使用 npm install 命令安装依赖包：
npm install @ngrx/effects @ngrx/store @ngrx/entity @ngrx/store-devtools @angular/material hammerjs --save
快速上手
- 导入 Angular-ngrx-crud 的模块：
CrudModule。
-- -------------------- ---- ------- ------ - ---------- - ---- -------------------- ----------- ------------- --------------- -------- --------------- ------------------------ ------------------------- ---------- -------------- -- ------ ----- --------- - -
- 在组件中使用
<ngc-crud>组件。
-- -------------------- ---- -------
-----
---------
---------------------
-------------------
-----------------
-------------------
-----------------------------
-------------------------
-------------------------
-------------------------
--------------------------
-----------
------- 在组件中定义需要使用的属性。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ------ - ---- -----------
------ - --------------- - ---- ---------------------
------------
--------- -----------
--------- -
-----
---------
---------------------
-------------------
-----------------
-------------------
-----------------------------
-------------------------
-------------------------
-------------------------
--------------------------
-----------
-------
--
------ ----- ------------ -
--------- ---------
-------- -------------------------- - -
-
------ -------
--------- -------
----- -------
--------- ----
--
-
------ --------------
--------- --------------
----- ------
-
--
------- -------
------- - ------
------------ - ---
------------------- -------- ---------------- --
-------------- ------- -
---------------------------
------------------- -- -
----------- - -------
---
-
-------------- ------- -
---------------------------
------------------- -- -
----------- - -------
---
-
-------------- ------- -
------------------------------
------------------- -- -
----------- - -----
---
-
-------------- ------- -
----------- - -------
-
-示例代码
entities.service.ts
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ------ - ---- -----------
------ - ---------- - ---- ------------------
------ - -- - ---- ---------------------
------ - ----------- --- - ---- -----------------
------ - ----------- - ---- --------------------
-------------
------ ----- --------------- ------- ------------------- -
--- - ---------------------------------
----------------- ----------- -
------------
-
-entity.ts
export interface Entity {
id?: number;
name: string;
description: string;
}app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ------ - ---- -----------
------ - --------------- - ---- ---------------------
------------
--------- -----------
--------- -
-----
---------
---------------------
-------------------
-----------------
-------------------
-----------------------------
-------------------------
-------------------------
-------------------------
--------------------------
-----------
-------
--
------ ----- ------------ -
--------- ---------
-------- -------------------------- - -
-
------ -------
--------- -------
----- -------
--------- ----
--
-
------ --------------
--------- --------------
----- ------
-
--
------- -------
------- - ------
------------ - ---
------------------- -------- ---------------- --
-------------- ------- -
---------------------------
------------------- -- -
----------- - -------
---
-
-------------- ------- -
---------------------------
------------------- -- -
----------- - -------
---
-
-------------- ------- -
------------------------------
------------------- -- -
----------- - -----
---
-
-------------- ------- -
----------- - -------
-
-总结
Angular-ngrx-crud 使 CRUD 应用程序的开发变得更加容易和快速，并提供了一致性和可维护性的最佳实践。本文介绍了 Angular-ngrx-crud 的安装和使用方法，希望能够对有需要的读者提供指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9281e8991b448e7544