标签：resolve 学习 API UI Resolver 组件 Angular 加载

通常在组件中可以使用 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/

标签：resolve,学习,API,UI,Resolver,组件,Angular,加载
来源： https://www.cnblogs.com/new-start/p/15069622.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。