Angular 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/

上一篇:新概念英语(1-47)A cup of coffee


下一篇:Angular 自定义结构化指令,如何传入多个输入参数