在 Angular 应用中，我们经常会使用路由功能来实现页面的跳转。但是，在关闭某个路由页面后，当我们返回前一页时，有时会出现错误，导致页面的展示和功能受到影响。这个问题看似不大，但却十分影响用户的体验，因此我们需要找到一种方法来解决这个问题。
问题分析
在关闭路由后返回上一页时，我们常常会使用浏览器默认提供的返回按钮。这时，如果关闭的路由页面中有一些需要进行异步加载的组件或者数据，而这些数据需要一定的时间才能加载完成，当用户点击返回按钮后，路由页面已经关闭了，异步加载的过程也被中断了。当我们再次返回前一页时，页面可能会因为数据加载未完成而出现错误。
这种问题，其实是因为默认情况下，浏览器返回上一页时是重新加载之前已经加载过的页面，而不是恢复到之前的页面状态。因此出现了上述情况。
解决方案
为了解决这个问题，我们需要对我们的路由进行一些配置和处理。具体来说，我们需要保留路由页面的状态，当用户返回时，能够恢复到之前离开的状态。
方案一：保存路由页面状态
一个简单的实现方式是在路由配置中添加一个 skipLocationChange 参数来确保取消路由页面时不改变 URL。 在下一个路由导航开始之前，你可以使用 LocalStorage 对数据进行缓存，这样就可以在用户关闭路由后恢复状态了。这种方案虽然简单，但是需要不断地保存和更新数据，不利于性能优化。
-- -------------------- ---- -------
------ ----- ------- ------ - -
-
----- --------
---------- --------------
--
-
----- --------
---------- --------------
--
-- ---
-
----- -----
----------- -------
-
--
-----------
-------- ----------------------------- -
-- -- ------------------ --
-------------------------- ----------
---------------- ----------
------------- --- ----
-------------------- ---------
------------------ ---------
----
-------- --------------
--
------ ----- ---------------- - -方案二：使用 Angular 自带的 RouteReuseStrategy
RouteReuseStrategy 是 Angular 提供的机制，它能够重用路由和组件，避免每次路由切换时的数据加载等操作。因此，我们可以通过定义自己的 RouteReuseStrategy 类，来解决我们上面提到的问题。
-- -------------------- ---- -------
------ - ----------------------- -------------------- ------------------ - ---- ------------------
--------- ------------------- -
--------- -----------------------
------- --------------------
-
------ ----- ------------------- ---------- ------------------ -
-------------- -------- - ----------
------------------ - --- ----------- -----------------------
------------------- ------------------------ ------- -
------ ----------------------------------------------------
-
------------ ----------------------- ------- --------------------- ---- -
----- ------------ ------------------- - -
--------- ------
------
--
--------------------------------------------------- -------------
-
------------------- ------------------------ ------- -
----- ---- - -----------------------
------ ------ -- ----------------------------------
-
--------------- ------------------------ ------------------- -
----- ---- - -----------------------
----- ------------ ------------------- - ----------------------------------
------ ----------- - ------------------ - -----
-
------------------------ ----------------------- ----- ------------------------ ------- -
------ ------------------ --- -----------------
-
-使用 RouteReuseStrategy 的方式相比方案一，有以下优点：
- 方案一需要手动保存和更新数据，而这种方式会自动保存和更新组件状态。
- 方案二还能够避免重复渲染组件，避免了一些无谓的性能浪费。
示例代码
看完理论部分之后，我们一起来看一下实际的实现过程。在这个简单的示例中，我们将实现一个具有两个路由的 Angular 应用，一个是首页 page1，另一个是详情页 page2。当我们从首页跳转到详情页时，详情页会进行异步数据加载。如果我们在详情页加载完成之前就退出了该页面，再次跳回详情页就会出现错误。我们可以通过上述提到的方案来解决这个问题：
-- -------------------- ---- -------
-----------
------------- -
-------------
---------------
--------------
--
-------- -
--------------
-----------------
----------------
--
---------- -
-
-------- -------------------
--------- -------------------
-
--
---------- --------------
--
------ ----- --------- - -可以看到，我们在 AppModule 中为应用提供了一个 CustomReuseStrategy 的实例，这样 Angular 就会自动调用这个实例来重用路由和组件。
-- -------------------- ---- -------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- ---------- ------- --------- -
------- ----
------------
------- ------- -------
------- --------------- ---------------
------- ----------- ----------
- - -
----------- ---- -
------------------------------------------ -- -
----- -- - --------------
---------------------------------------------------------------------------------------- ---- -- -
----------- - -----
---
---
-
-------------- ---- -
-- ---------------
--------------------------------------- ----------------------------------------------
-
--------- ---- -
-------------------------------
-
-在 Page2Component 中，我们使用 httpClient 对详情数据进行了异步加载，并在离开页面时将数据保存到 LocalStorage 中。
-- -------------------- ---- -------
------ ----- ------------------- ---------- ------------------ -
-------------- -------- - ----------
------------------ - --- ----------- -----------------------
------------------- ------------------------ ------- -
------ ----------------------------------------------------
-
------------ ----------------------- ------- --------------------- ---- -
----- ------------ ------------------- - -
--------- ------
------
--
--------------------------------------------------- -------------
-
------------------- ------------------------ ------- -
----- ---- - -----------------------
------ ------ -- ----------------------------------
-
--------------- ------------------------ ------------------- -
----- ---- - -----------------------
----- ------------ ------------------- - ----------------------------------
------ ----------- - ------------------ - -----
-
------------------------ ----------------------- ----- ------------------------ ------- -
------ ------------------ --- -----------------
-
-最后，我们在 CustomReuseStrategy 中进行路由处理。当路由页面发生变化的时候，我们会同时从 LocalStorage 取出之前保存的组件状态，以便进行状态恢复。
总结
上文我们介绍了两种方法来解决 Angular 应用中关闭路由后返回上一页出现错误的问题。第一种方法是手动保存和更新数据，并通过 LocalStorage 进行缓存；第二种方法是使用 Angular 自带的 RouteReuseStrategy 机制，实现路由和组件的重用。根据实际情况，我们可以选择适合自己的方案，提升应用的体验和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d9dd795b1f8cacd53a6a3