Angular Resolver返回undefined 组件无法获取预加载数据如何解决

问题根因 #

• Resolve守卫要求resolve()方法必须返回Observable、Promise或者同步值，Angular会自动订阅该Observable，等请求完成后才会加载对应组件，同时将返回值注入路由的data属性中。
• 你当前的getOngoingClasses()方法没有返回任何值，且手动调用subscribe订阅了接口请求，导致resolve拿到的返回值为undefined，组件中自然无法获取到预加载的数据。

修复步骤 #

1. 调整RouteResolver代码 #

移除手动订阅逻辑，直接返回接口请求的Observable，通过map操作符处理返回的业务数据即可：

import { map } from 'rxjs/operators'; // 需提前导入map操作符

export class RouteResolver implements Resolve<any> {
  constructor(
    public commonService: CommonService,
    private router: Router,
  ) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.getOngoingClasses();
  }

  getOngoingClasses(): Observable<any> {
    this.commonService.API_URL = `${environment.apiUrl}/admin/dashboardOngoingClasses?limit=10&offset=0&searchInput=`;
    // 直接返回Observable，由Angular自动处理订阅逻辑
    return this.commonService.getList().pipe(
      map(response => response?.data)
    );
  }
}

2. 组件代码无需修改 #

原组件的取值逻辑符合规范，修复Resolver后即可正常拿到预加载数据：

ngOnInit(): void {
  this.activateRoute.data.subscribe((results: { results: any }) => {
    console.log(results.results); // 可正常输出接口返回的data数据
  });
}

可选优化：添加错误处理 #

如果需要处理接口请求失败的场景，可添加catchError操作符避免路由阻塞：

import { map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

getOngoingClasses(): Observable<any> {
  this.commonService.API_URL = `${environment.apiUrl}/admin/dashboardOngoingClasses?limit=10&offset=0&searchInput=`;
  return this.commonService.getList().pipe(
    map(response => response?.data),
    catchError(err => {
      // 错误时可跳转至错误页
      this.router.navigate(['/error']);
      // 返回默认值避免路由卡住
      return of(null);
    })
  );
}

内容的提问来源于stack exchange，提问作者Ahmad