热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AngularResolver学习

通常在组件中可以使用service加载API数据。但如果有多个API调用,其加载逻辑就会变得复杂,而且可能组件需要处理每个加载请求的中间状态,做出合适的UI提示。Resolver设

通常在组件中可以使用 service 加载 API 数据。但如果有多个 API 调用,其加载逻辑就会变得复杂,而且可能组件需要处理每个加载请求的中间状态,做出合适的 UI 提示。

Resolver 设计为在 Router -> Component 中间插入了一个附加的对象,可以用来提前准备组件所需要的数据,从而使得组件的逻辑更简单清晰。

Resolver 是一个 Injectable,同时需要实现 Resolve 接口的 resolve 方法,在其中实现获取数据的逻辑,并返回。

在 router 中,可以对需要的 route 增加 resolve 属性,指定需要使用那个 Resolver. 然后,在组件中,预设一个 Observable 属性,用于接收数据。并在 ngOnInit() 中,通过访问 ActivatedRoute 的 snapshot.data,即可读取 resolver 提供的数据。

使用 Resolver 还有一个好处,就是数据的加载状态可以通过订阅 router 的相关事件来进行统一处理,放在顶层组件中统一做 UI 提示。

https://www.ronin.consulting/front-end/angular-resolvers-and-when-to-use-them/



推荐阅读
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 微软Exchange服务器遭遇2022年版“千年虫”漏洞
    微软Exchange服务器在新年伊始遭遇了一个类似于‘千年虫’的日期处理漏洞,导致邮件传输受阻。该问题主要影响配置了FIP-FS恶意软件引擎的Exchange 2016和2019版本。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • TCP长连接设备管理平台:架构与功能概览
    本文介绍了基于TCP长连接的设备管理平台的设计理念、技术选型及主要功能模块。最初,项目旨在实现简单的协议测试,但随着需求扩展,逐步演变为一个完整的前后端分离系统。 ... [详细]
  • 这是一个基于 React 构建的掘金移动版应用,主要模仿了掘金的 UI 设计,并进行了部分自定义调整。项目专注于移动端体验,同时支持服务端渲染和渐进式网络应用(PWA)功能。 ... [详细]
  • 本文汇总了在正式宴会上常用的寒暄语句,包括欢迎词、感谢词及日常问候,适用于各种正式场合。这些语句不仅有助于提升交际礼仪,还能增进彼此之间的友好关系。 ... [详细]
  • 本文详细探讨了JDBC(Java数据库连接)的内部机制,重点分析其作为服务提供者接口(SPI)框架的应用。通过类图和代码示例,展示了JDBC如何注册驱动程序、建立数据库连接以及执行SQL查询的过程。 ... [详细]
  • 使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 本文探讨了在Koa框架下,如何在启动服务前检查指定端口是否已被占用的方法,并提供了相应的代码示例。 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
  • Vue 移动端实现侧边滑出菜单功能
    本文详细探讨了如何在 Vue 移动端应用中实现侧边滑出菜单的效果,包括代码实例和样式设置,旨在为开发者提供实用的开发技巧。 ... [详细]
author-avatar
穿着拖鞋的中年男子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有