介绍
sn-ui-router-rx 是一个使用 RxJS 封装的 Angular UI Router 的 npm 包。它提供了一些方便的工具和指令，可以让我们更方便地处理路由相关的逻辑。本文将介绍 sn-ui-router-rx 的使用方法和注意事项，并提供一些实用的示例代码。
安装
使用 npm 安装 sn-ui-router-rx 。
npm i sn-ui-router-rx --save
安装完成后，在应用的入口模块中引入 sn-ui-router-rx ，并将它添加到 imports 数组中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- ------------------
------ - ------------ - ---- ------------------
----- ------ - -
-- ----------- ------- -- ------ --
--
-----------
-------- -
--------------
-------------------------- ------ --
--
------------- ---------------
---------- --------------
--
------ ----- --------- --使用
state 自动订阅
sn-ui-router-rx 中的 rxState （@uirx/state）是一个 Angular 服务，它提供了一些可以让我们更方便地处理路由状态的方法。其中，比较重要的一个特性是它可以自动订阅当前路由状态的变化，并将变化绑定到组件中。
我们可以通过 rxState 服务将状态的某个属性绑定到组件的一个成员变量中，然后在组件的生命周期钩子中使用这个变量。
<h1>{{ title }}</h1>-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------- - ---- ------------------ ------------ --------- ----------- --------- ------- ----- -------- -- ------ ----- ------------ - ----------------- ------ ------- -
当路由状态更新时，title 的值也会更新，并同步到模板中。
reactToState 路由导航
使用 rxState 服务，我们可以轻松地在组件中监听路由状态的变化。但要实现一些更高级的场景，我们需要使用另一个服务：rxState.reactToState （@uirx/reactive-state-to-ui-router）。这个服务提供了一个 redirect 操作符，可以让我们在路由导航时进行一些复杂的逻辑。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ------------------
------ - ------------ - ---- ------------------------------------
------------
--------- -----------
--------- -
------ ----- -------
----- ------- ------
-
--
------ ----- ------------ -
----------------- ------ -------
------------------- -------- -------
------------- -
----------------------- ----- -- -
-- ------------ --- ------- -
------ ------------- - --- -- ------
- ---- -
------ --------------
-
-- - --------- ---- --------------
-
-在这个例子中，我们通过 reactToState 服务监听 content 属性的变化，并对其进行了一些处理。如果当前状态的标题是 home ，我们将 content 的值添加了一个后缀，以表示当前页面正在促销。最后，我们使用 redirect 操作符将路由导航重定向到满足自定义逻辑的目标路由。
注意：每个 reactToState 调用只能应用于单个属性，但我们可以多次调用该方法以处理多个属性。
示例
简单的路由状态监听
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------- - ---- ------------------ ------------ --------- ----------- --------- ------- ----- -------- -- ------ ----- ------------ - ----------------- ------ ------- -
在这个例子中，我们将 title 属性绑定到组件的成员变量中，当路由状态变化时，title 的值也会同步更新到组件。
路由导航重定向
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ------------------
------ - ------------ - ---- ------------------------------------
------------
--------- -----------
--------- -
------ ----- -------
----- ------- ------
-
--
------ ----- ------------ -
----------------- ------ -------
------------------- -------- -------
------------- -
----------------------- ----- -- -
-- ------------ --- ------- -
------ ------------- - --- -- ------
- ---- -
------ --------------
-
-- - --------- ---- --------------
-
-在这个例子中，我们使用了 reactToState 服务对 content 属性进行监听，并对其进行处理。当路由的标题为 home 时，我们在 content 的后面添加了一个后缀，以表示当前页面正在促销。最后，我们使用 redirect 操作符将路由导航重定向到满足自定义逻辑的目标路由。
无限滚动加载
<h1>{{ title }}</h1>
<ol>
<li *ngFor="let item of items">{{ item }}</li>
<li *ngIf="loading">Loading...</li>
</ol>
<button (click)="loadMore()">Load more</button>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ------------------
------ - ------------ - ---- ------------------------------------
------ - ------- - ---- -------
------ - ------ ---- ----- ---------- ---------- --- - ---- -----------------
------------
--------- -----------
--------- -
------ ----- -------
----
--- ----------- ---- -- --------- ---- -------
--- -------------------------------
-----
------- ------------------------- -------------
-
--
------ ----- ------------ -
----------------- ------ -------
----------------- ------ ---------
------- - ------
------- --------- - --- ----------------
------------- -
--------------------- ----- -- -
-- -------- -
------ ---
-
------ ---------------------------------- -- ------------- - ------
------------------ -- -----------------------
-
---------- -
------------ - -----
--------------------
---------
-------------
---------- ---- -- --- - -----
---------- -- -
----- -------- - ------------------------ ------ - ---
------ --------------- - -------- - -----
---
------ -- ------------ - -------
------------------ -- -
-- ---------- -
------ -------------------------
- ---- -
------ -----------------
-
--
-------------------- -- -
---------- - ----------------------------
---
-
-在这个例子中，我们使用 reactToState 服务监听 items 属性的变化，并对变化进行了一些处理，以生成新的数据集。然后，我们利用 RxJS 的操作符链式地处理 loadMore$ 的事件流，以实现无限滚动加载。每次加载5个元素，直到没有剩余的项可供加载。
总结
通过使用 sn-ui-router-rx ，我们可以更方便地处理路由状态的变化，并实现一些更复杂的路由导航逻辑。rxState 和 reactToState 这两个服务尤其有用，它们可以将路由状态绑定到组件中，并且让我们在各种情况下对路由导航进行响应。另外，使用 RxJS 的操作符可以帮助我们处理事件流，实现高级的路由导航逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586a81e8991b448d5a21