前言
在开发前端单页应用时，经常会遇到需要撤销操作和重做操作的需求。很多前端框架已经提供了类似的功能（如 Vue.js 的 Vuex），但是对于使用 Angular 的开发者来说，xws-ngrx-undo 是一个非常不错的选择。本文将介绍如何使用 xws-ngrx-undo 包来实现 Angular 应用的撤销/重做功能。
安装 xws-ngrx-undo
首先，我们需要安装 xws-ngrx-undo 包。可以使用以下命令来安装：
npm install xws-ngrx-undo --save
在应用中使用 xws-ngrx-undo
添加 xws-ngrx-undo 到依赖列表
打开 Angular 应用的 package.json 文件，找到 dependencies 节点，添加 xws-ngrx-undo 到依赖列表：
"dependencies": {
// ... 其他依赖
"xes-ngrx-undo": "latest"
},然后在终端中运行 npm install 命令来安装包。
添加到 @NgModule 的 providers 列表
打开目标组件所在的模块（通常是 app.module.ts），添加以下代码到 providers 列表中：
-- -------------------- ---- -------
------ ----------------- ----------------- --------------- ---- ----------------
-- ---
-------- -
-- ---
---------------------
--------- ---------------
---
--
---------- -
-
-------- -----------------
--------- -
----------- ---
---------------- ----- -- -----
- -- --------------
--
-- ---
--这样就完成了 xws-ngrx-undo 的配置。
配置 Action
在每个需要进行撤销/重做操作的 Action 中添加以下代码：
-- -------------------- ---- -------
------ ---------------- --------- --------- ---- ----------------
-------------
------ ----- -------- -
------ -------- ---- - ----------- -- -----------
------------------ -------- ---- --
----- ----------- ------- ----------------------- -
-- --- -------
------ ----------------
-
----------- ------ --------- --------------- -
-- --- ------
------ ----------------
-
-在 Action 中，通过 ngrxUndo 和 ngrxRedo 方法来分别向 Undo/Redo List 中添加快照；在调用时，只需要在原先的操作后添加 ngrxUndo(store)，即可实现自动添加快照的功能。redo 方法用于执行逆向的操作。
在组件中使用撤销/重做
现在，我们已经可以在应用中添加快照，并且可以使用 ngrxUndo 和 ngrxRedo 来将应用的状态恢复到之前的某个状态。下面我们来看如何在组件中使用撤销/重做功能。
-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ ---------------- ---- --------------
------ ----------- ---- -----------------
------ --------- ---- -------
------ ------ ----- ------ ---- ----------------
------------
--------- -------------------
------------ -------------------------------
--
------ ----- ----------- ---------- ------- --------- -
------- ------- ------------ - --- ----------
------- - ------
------- - ------
------------------- ------ ------ ------- --------- --------------- --
---------- -
-------------------
----------------------
-------------- -- -----------------------
----------------------
-
------------- -
-------------------
-----------------------
-
---------------- -
------------ - -------------------------
------------ - -------------------------
-
-------- -
-----------------
-
-------- -
-----------------
-
--------- -
------------------
-
-组件中的 updateUndoRedo 方法用于根据当前的状态更新撤销和重做按钮的状态（是否可用）。onUndo 和 onRedo 方法分别用于执行撤销和重做操作。onClear 方法用于清除所有的快照。
结语
上文简单介绍了如何使用 xws-ngrx-undo 来实现撤销/重做的功能。实际上，xws-ngrx-undo 还提供了很多高级的功能，比如可以通过 actions$ 流来自定义操作快照的生成，也可以通过 bufferSize 来设置快照的数量限制等等。我们希望这篇文章可以对你理解 xws-ngrx-undo 有所帮助，让你的 Angular 应用变得更加强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725881e8991b448e875c