作为前端开发人员，我们必须采用一些优秀的工具和编程技巧来优化我们的应用程序。Angular4受到很多开发人员的青睐，本文将为您介绍Angular4在数据加载方面的最佳实践之一 - Resolvers。
什么是 Resolvers？
在 Angular 应用程序中，Resolvers主要用于在路由到达其目标时，在该组件逻辑开始之前预加载组件数据。这将节省请求和处理数据方面的时间和资源。
为什么要使用 Resolvers？
当应用程序加载时，数据加载可以很容易地变得非常缓慢，可能会导致错误。使用Resolvers可以解决这个问题，因为它们允许我们在组件渲染之前加载组件数据。
此外，Resolvers可以使我们更好地组织 Angular 应用程序的多个逻辑部分，分离不同的关注点，提高可读性和可维护性。
如何创建 Resolvers？
以下是使用 Angular CLI创建一个新的Resolver的基本命令：
ng generate resolver [resolver-name]
这将在应用的根目录的“src/app”目录中生成Resolver。
现在，我们可以在新的resolver文件中实现resolve方法来加载数据。 下面是一个Resolver的基本结构：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - -------- ---------------------- - ---- ------------------
------ - ---------- - ---- ------------------
------ - --------- - ---- ---------------
-------------
------ ----- ---------- ---------- ------------ -
------------------- ---------- ---------- - -
-------------- ------------------------ --------------- -
----- -- - ----------------
-- ------ ---- ---------- ----
------ -----------------------
-
-在这个示例中，我们注入一个 MyService 来获取我们想要的数据，然后使用 resolve 方法来触发 MyService上的 get方法。
如何使用我们的 Resolver？
现在我们已经创建了一个Resolver，我们需要使用它来加载组件数据。
以下是实现此功能的步骤：
在我们的路由定义中使用它。
在路由定义中添加 resolve 属性，并为其赋值刚刚创建的 Resolver。
{ path: 'my-component/:id', component: MyComponent, resolve: { myData: MyResolver } },在组件中订阅解决方案。
我们还需要在组件中添加订阅和处理该Resolver解析为的Observable的逻辑。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - -------------- - ---- ------------------ ------------ --------- --------- ------------ ---------------------- ---------- ---------------------- -- ------ ----- ----------- ---------- ------ - ------- ---- ------------------- ------ --------------- - - ---------- - ----------- - ----------------------------------- - -
在这个示例中，我们正在使用ActivatedRoute访问路由解析器，并在组件的 ngOnInit 方法中订阅我们之前定义的 Resolver返回的数据。 我们使用这个数据来渲染组件。
结论
Resolvers可能是您在Angular应用程序中实现数据加载的最佳实践之一。 他们仅仅是一个很好的工具，但它们可以在应用程序逻辑上提供一些深入的层次，并帮助分离您的代码和不同的关注点。 希望本文能让你更好地理解和使用 Resolvers。
示例代码
你可以在我的 Github 仓库中查看本文的完整示例代码：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d559ca336082f254c52c4