作者:穿着拖鞋的中年男子 | 来源:互联网 | 2023-10-12 17:57
通常在组件中可以使用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/