mcpField
A
angular-resolvers

angular-resolvers

github.com/oguzhan18开发7179 次安装31 周前更新
代码仓库

关于 angular-resolvers

面向在路由导航期间加载数据的 Angular 开发者的参考技能。内容介绍如何定义函数式解析器、将其关联到路由、在组件中读取解析数据并处理错误。

主要功能

  1. 01函数式路由解析器
  2. 02将解析器关联到路由
  3. 03在组件中读取解析数据
  4. 04处理解析器错误
  5. 05配置多个解析器

适用场景

  1. 01显示路由前加载用户数据
  2. 02向路由组件提供已解析的数据
  3. 03加载失败时返回备用值

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-resolvers

安装后在 Claude Code 中输入/angular-resolvers确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 路由解析器

版本： Angular 21（2025） 标签： 解析器、路由、数据加载

参考： 解析器指南

最佳实践

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

评论

支持 Markdown