Back to Details

angular-resolvers

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Route Resolvers

Angular Route Resolvers

Version: Angular 21 (2025) Tags: Resolvers, Routing, Data Loading
References: Resolvers Guide
版本: Angular 21 (2025) 标签: Resolvers, 路由, 数据加载
参考资料: Resolvers指南

Best Practices

最佳实践

  • Create functional resolver
ts
export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const userId = route.paramMap.get('id');
  return userService.getUser(userId!);
};
  • Use resolver in route
ts
const routes: Routes = [
  {
    path: 'user/:id',
    resolve: { user: userResolver },
    component: UserComponent
  }
];
  • Get resolved data in component
ts
@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  user = this.route.snapshot.data['user'];
  
  // Or with input binding (Angular 17+)
  userId = input<string>();
}
  • Handle resolver errors
ts
export const dataResolver: ResolveFn<Data> = (route, state) => {
  const service = inject(DataService);
  return service.getData().pipe(
    catchError(() => of(null))
  );
};
  • Use multiple resolvers
ts
const routes: Routes = [
  {
    path: 'dashboard',
    resolve: {
      user: userResolver,
      settings: settingsResolver
    },
    component: DashboardComponent
  }
];
  • 创建函数式resolver
ts
export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const userId = route.paramMap.get('id');
  return userService.getUser(userId!);
};
  • 在路由中使用resolver
ts
const routes: Routes = [
  {
    path: 'user/:id',
    resolve: { user: userResolver },
    component: UserComponent
  }
];
  • 在组件中获取已解析数据
ts
@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  user = this.route.snapshot.data['user'];
  
  // Or with input binding (Angular 17+)
  userId = input<string>();
}
  • 处理resolver错误
ts
export const dataResolver: ResolveFn<Data> = (route, state) => {
  const service = inject(DataService);
  return service.getData().pipe(
    catchError(() => of(null))
  );
};
  • 使用多个resolver
ts
const routes: Routes = [
  {
    path: 'dashboard',
    resolve: {
      user: userResolver,
      settings: settingsResolver
    },
    component: DashboardComponent
  }
];