Angular Route中如何提前获取数据

这篇文章主要讲解了“Angular Route中如何提前获取数据”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Angular Route中如何提前获取数据”吧！提前获取意味着在数据呈现在屏幕之前获取到数据。Resolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单，没有数据时，你想向用户一个空的表单，当在加载用户数据时展示一个 loader，然后当数据返回时，填充表单并隐藏 loader。通常，我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说，组件加载完之后，我们发起数据请求。在 ngOnInit() 中操作，我们需要在每个需要的组件加载后，在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader，而不是每个路由中都添加 loader。本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。为了在应用中使用 resolver，你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟，而不需要自己开发。JSONPlaceholder 是一个很棒的接口资源，你可以借助它更好学习前端的相关概念而不被接口所约束。现在，接口的问题解决了，我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务，所以我们将创建一个服务。–skipTests=true 跳过生成测试文件src/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法，它有两个参数：route（ActivatedRouteSnapshot 的实例）和 state(RouterStateSnapshot 的实例)。loader 通常是在 ngOnInit() 中编写所有的 AJAX 请求，但是逻辑将会在 resolver 中实现，替代 ngOnInit()。接着，创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用，接着在路由中配置 resolve信息，（页面将会等待）直到 resolver 被处理。在 resolver 被处理之后，我们可以通过路由来获取数据然后展示在组件中。现在，我们成功创建了服务，是时候编写一个 AJAX 请求的逻辑了。model 的使用能够帮助我们减少错误。post.tsmodel 就绪，是时候获取帖子 post 的数据了。post.service.ts现在，这个服务随时可被调用。demo-resolver.service.ts帖子列表数据从 resolver 中返回。现在，你需要一个路由去配置 resolver，从路由获取数据，然后让数据展示在组件中。为了进行路由跳转，我们需要创建一个组件。为了路由可见，在 app.component.ts 添加 router-outlet。现在，你可以配置 app-routing.module.ts 文件了。下面的片段代码将有助于你理解路由配置 resolver。app-routing-module.ts一个 resolve 已经添加到路由配置中了，它将发起一个 HTTP 请免费云主机、域名求，然后当 HTTP 请求成功返回后，允许组件初始化。路由将组装获取到的 HTTP 请求返回的数据。向用户展示一个请求正在进行，我们在 AppComponent 中编写一个公共且简单的 loader。你可以根据需要自定义。app.component.htmlapp.component.ts当导航开始，isLoader 值被赋予 true，页面中，你将看到下面的效果。当 resolver 处理完之后，它将会被隐藏。现在，是时候从路由中获取值并将其展示出来。port-list.component.ts如上所示，post 的值来自 ActivatedRoute 的快照信息 data。这值都可以获取，只要你在路由中配置了相同的信息。我们在 HTML 进行如下渲染。CSS 片段样式让其看起来更美观。port-list.component.css推荐使用 scss 预处理器编写样式从路由中获取数据之后，它会被展示在 HTML 中。效果如下快照。感谢各位的阅读，以上就是“Angular Route中如何提前获取数据”的内容了，经过本文的学习后，相信大家对Angular Route中如何提前获取数据这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: react如何改变数组中的某个元素

这篇“react如何改变数组中的某个元素”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何改变数组中的某个元素”文章吧。react改变…