随着前端技术的快速发展，前端项目变得越来越庞大和复杂。为了更好地管理项目，使其具有更好的可重用性和扩展性，前端社区中出现了许多优秀的框架和库。
其中，Angular是一个功能强大的前端框架，它提供了多个模块帮助我们开发复杂的单页应用程序。@angular-redux/router是一款应用于Angular中的路由库，它具有简单易用、可扩展和高可复用性的特点。在本文中，我们将介绍如何在Angular项目中使用@angular-redux/router。
安装和配置
首先，我们需要使用npm安装@angular-redux/router和redux-observable两个库，它们都是我们使用该路由库的必需工具。
npm install --save @angular-redux/router redux-observable
接下来，在我们的应用程序中配置这两个库：
1.创建store.ts文件并配置Angular Redux Store
-- -------------------- ---- -------
------ - ------ ------------ -------- --------------- - ---- --------
------ - -------- -------------- ----------------- - ---- -----------------------
------ - -------------------- - ---- -------------------
-- -- ---- ------- - ----
----- ----------- - ------- ---- ------- ---- -- -
-- ---
-
----- -------- - --------- ---- ------ ---- -- -
-- ---
-
------ -------- ----------------- ---------- -
-- -- ----- ------- --- ------- ---- ----------
----- -------------- - -----------------------
----- ---------------- - ---------------------------------------------- -- --------
----- ----- - ------------------------ -----------------
-------------------------------
---
-- -- ----- ---------- ---------
----- -------- ------------ - --- -------------- ------
----------------------------------- --- --- ------------------
------ ------
-2.在app.module.ts中导入和配置ReduxStore和RouterStore
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - -------------- ------- - ---- -----------------------
------ - -------------------- ------------- - ---- ------------------------
------ - -------------- - ---- ----------
-----------
-------- -
--------------
--------------
-----------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- -
-------------------- -------------
-------------- -------------- -
---------------------------------------
-- ---------------
---------------------------
-
-3.使用步骤
现在，我们已经成功地安装和配置了@angular-redux/router，可以在我们的项目中使用它了。
首先，我们需要在路由模块中定义我们的路由。我们可以使用Redux减少状态来定义路由。以app.routing.ts路由为例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
------ - ---------- - ---- -----------------------
------ ----- ----------- ------ - -
-
----- ---
----------- ---------
---------- ------
--
-
----- --------
---------- --------------
--
-
----- ------------
---------- ------------------
--
-
----- -----
---------- -----------------
-
--
------ ----- ------------- - ------------- -- -
------ -
--- -------------------------------------------
--
---注意，我们导入了createEpic对路由进行管理。
接下来，我们需要在应用程序组件中添加Redux Reducer来处理路由状态。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- ------ - ---- -----------------------
------ - ---------- - ---- -------
------ - ------ - ---- ------------------
------ - -------- - ---- ----------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------- -- ---------------------------
-------- ------ -------------------
------------------- -------- ------------------
------- ------- ------- -
-
---------- -
------------------------- -- -
------------------
-- -- --------- ---
---
-
-最后，我们需要在组件中使用路由。单击链接“login”或“dashboard”，进行路由的导航。
<ul> <li><a [routerLink]="['/login']">Login</a></li> <li><a [routerLink]="['/dashboard']">Dashboard</a></li> </ul> <router-outlet></router-outlet>
现在我们已经成功地在Angular中使用了@angular-redux/router，实现了路由的管理和导航。
总结
在这篇文章中，我们介绍了如何使用@angular-redux/router管理和导航路由。在使用这个库时，我们需要进行正确的配置和定义路由。并且，我们还引入了React Redux和Redux DevTools。
使用@angular-redux/router及其相关库，我们可以轻松构建复杂的单页应用程序，并在开发和调试中大大提高我们的效率。
示例代码
本文所有示例代码均可以在Github Repo 上获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583cc0