Angular 15函数式Resolver注入双服务触发NG0203错误,求解决
问题分析
错误NG0203的核心原因是**inject()只能在Angular的注入上下文内调用**,你在RxJS的mergeMap异步回调中调用inject(AddressService)时,已经脱离了Resolver函数的顶层注入上下文(这个上下文仅在Resolver函数刚执行的瞬间存在)。
修正方案
所有需要注入的服务必须在Resolver函数的顶层作用域内完成注入,不能放到异步操作的回调里。调整后的代码如下:
export const addressResolver: ResolveFn<Address> = ( route: ActivatedRouteSnapshot ) => { // 所有注入操作放在函数顶层,确保在注入上下文内执行 const userService = inject(UserService); const addressService = inject(AddressService); return userService.getUserInfo().pipe( mergeMap((user: any) => { // 直接使用已注入的addressService实例 return addressService.getAddressByUserId(route.params['addressType'], user.id); // 原代码中的map操作符是多余的,可直接返回Observable }) ); };
补充说明
- 函数式Resolver(
ResolveFn)的注入上下文仅在函数初始化执行的阶段有效,任何异步回调(比如RxJS操作符的回调、setTimeout等)都不在这个上下文范围内,因此不能在这些地方调用inject()。 - 若需要在异步逻辑中使用服务,必须提前在顶层注入并保存引用,再在回调中使用该引用。
内容的提问来源于stack exchange,提问作者Ashok
相关产品推荐
相关产品推荐

