在 Angular 中，我们经常会遇到需要在路由加载之前获取数据的情况。例如，我们需要在展示某个组件之前从后端获取一些数据，然后才能正确地渲染该组件。为了解决这个问题，Angular 提供了一个叫做 Resolver 的机制，它可以在路由加载之前预先处理一些数据，并将这些数据传递给路由组件。
Resolver 是什么？
在 Angular 中，Resolver 是一个实现了 Resolve 接口的服务。该接口只有一个方法 resolve，它会在路由加载之前被调用，并返回一个 Observable，该 Observable 将会在路由组件加载之前被订阅。
Resolver 的作用是预先处理一些数据，并将这些数据传递给路由组件。这样，我们就可以在路由组件中使用这些数据，而无需在组件中再次发起请求。
Resolver 的优势
使用 Resolver 的优势在于可以减少网络请求的次数，提高应用程序的性能。当我们使用 Resolver 时，数据会在路由加载之前被预先处理，并在路由组件加载时传递给组件。这样，我们就可以避免在组件中再次发起请求，从而减少了网络请求的次数，提高了应用程序的性能。
另外，使用 Resolver 还可以提高应用程序的可维护性。当我们需要在多个组件中使用相同的数据时，我们可以将数据处理的逻辑封装在 Resolver 中，这样我们就可以在多个组件中复用相同的 Resolver。
如何使用 Resolver？
使用 Resolver 需要以下几个步骤：
- 创建一个实现了
Resolve接口的服务。 - 在路由配置中为需要使用 Resolver 的路由添加 Resolver。
- 在路由组件中通过 ActivatedRoute 获取 Resolver 返回的数据。
下面，我们将通过一个示例来演示如何使用 Resolver。
示例代码
首先，我们创建一个 HeroesResolver 服务，该服务将从后端获取英雄列表数据。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- ------------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- -------------- ---------- --------------- -
------------------- ------------ ------------ --
---------- ------------------ -
------ -----------------------------
-
-HeroesResolver 实现了 Resolve 接口，并在 resolve 方法中调用了 HeroService 的 getHeroes 方法，从后端获取英雄列表数据。
接下来，我们在路由配置中为需要使用 Resolver 的路由添加 Resolver。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ----------------- - ---- ------------------------
------ - -------------- - ---- --------------------
----- ------- ------ - -
-
----- ---------
---------- ------------------
-------- -
------- --------------
-
-
--
-----------
-------- --------------------------------
-------- --------------
--
------ ----- ----------------- - -在路由配置中，我们为 heroes 路由添加了一个名为 heroes 的 Resolver，并将 Resolver 返回的数据绑定到 heroes 属性上。
最后，在路由组件中通过 ActivatedRoute 获取 Resolver 返回的数据。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------ - ---------- - ---- -------
------ - ---- - ---- ---------
------------
--------- ----------------
--------- -
---------------
----
--- ----------- ---- -- ------- - -------
-------------
-----
-----
-
--
------ ----- ----------------- -
-------- -------------------
------------------- ------ --------------- -
------------ - ---------------------
-------- -- ------------
--
-
-在 HeroListComponent 中，我们通过 ActivatedRoute 获取 Resolver 返回的数据，并将其绑定到 heroes$ 属性上。我们还使用了 async 管道，将 heroes$ 属性转换为一个 Observable，以便在模板中使用。
到这里，我们就完成了使用 Resolver 预先处理路由数据的整个过程。
结论
在 Angular 中，使用 Resolver 可以预先处理路由数据，并将数据传递给路由组件，从而提高应用程序的性能和可维护性。使用 Resolver 需要创建一个实现了 Resolve 接口的服务，并在路由配置中为需要使用 Resolver 的路由添加 Resolver。在路由组件中，我们可以通过 ActivatedRoute 获取 Resolver 返回的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676ba3e478388e33bb24efae