通常Angular Resolver返回undefined是因为它不能正确地获取到所需信息。解决此问题的一种方法是确保Resolver函数返回正确的Observable,并使用管道操作符过滤或映射数据。
例如,假设我们有一个名为MyResolver
的Resolver,它从API获取用户的详细信息并返回Observable。如果返回值为undefined,则可以检查以下内容:
@Injectable({ providedIn: 'root' })
export class MyResolver implements Resolve {
constructor(private userService: UserService) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable {
const userId = route.paramMap.get('id');
return this.userService.getUserDetails(userId);
}
}
我们可以在Resolver中使用tap
操作符,将获取到的用户信息输出到浏览器控制台:
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable {
const userId = route.paramMap.get('id');
return this.userService.getUserDetails(userId).pipe(
tap(user => console.log(user))
);
}
然后在路由定义中使用Resolver:
const routes: Routes = [
{
path: 'user/:id',
component: UserDetailsComponent,
resolve: {
user: MyResolver
}
}
];
在UserDetailsComponent
组件中,我们可以通过访问ActivatedRoute
来获取解析器提供的数据:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data.subscribe(data => {
console.log(data.user); // should log the resolved user object
});
}