mcpField
A
angular-router

angular-router

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

关于 angular-router

Angular Router 参考技能，涵盖现代路由配置，以及导航、守卫、数据加载和延迟加载实践，适用于构建 Angular 单页应用的开发者。

主要功能

  1. 01函数式守卫与解析器
  2. 02通过组件绑定传递路由输入
  3. 03使用 provideRouter 配置路由
  4. 04延迟加载路由
  5. 05预取路由数据
  6. 06用通配路由处理 404 页面

适用场景

  1. 01保护延迟加载路由
  2. 02将路由参数传给组件
  3. 03在显示路由前获取数据
  4. 04配置未找到页面

安装

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

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

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

包含的文件

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

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

详细介绍

@angular/router

版本： Angular 21（2025） 标签： 路由、导航、守卫、延迟加载、SPA

参考： 文档 — 官方路由指南 • API • GitHub

API 变更

本节记录近期特定版本的 API 变更。

  • 新增：函数式守卫和解析器 — 优先使用函数式方法，而非基于类的守卫 来源

  • 新增：路由器输入 — 通过路由输入向组件传递数据的新方式 来源

  • 新增：withComponentInputBinding — 启用从路由参数绑定组件输入

  • 新增：路由器快照改进 — 更好地保障路由参数的类型安全

  • 新增：provideRouter() — 使用函数式提供程序配置现代路由器

  • 已弃用：RouterModule.forRoot() — 在现代应用中使用 provideRouter()

最佳实践

  • 对功能模块使用延迟加载 — 将初始包大小减少 50-70%
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.DASHBOARD_ROUTES)
  }
];
  • 优先使用函数式守卫，而非基于类的守卫
// ✅ Modern functional guard
const authGuard = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  return router.createUrlTree(['/login']);
};

// ❌ Avoid class-based guards for new code
// @Injectable() export class AuthGuard implements CanActivate { ... }
  • 对延迟加载的路由使用 CanMatch 守卫 — 防止未经授权的代码下载
{
  path: 'admin',
  canMatch: [authGuard],
  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
}
  • 使用解析器预取数据 — 消除加载动画
{
  path: 'user/:id',
  resolve: { user: userResolver }
}

// In component
@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  // Modern way
  user = input.required<User>();
  
  // Legacy way
  ngOnInit() {
    this.route.data.subscribe(data => {
      this.user = data['user'];
    });
  }
}
  • 使用路由器输入以提高类型安全性
// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
};

// Component receives route params as inputs
@Component({})
export class UserComponent {
  @Input() id!: string;
}
  • 使用通配符路由处理 404 页面
{
  path: '**',
  component: NotFoundComponent
}
  • 使用 PreloadAllModules 在后台加载
provideRouter(routes, withPreloading(PreloadAllModules))
  • 使用 routerLink 进行导航 — 保持 SPA 行为
// ✅ Correct
<a routerLink="/dashboard">Dashboard</a>

// ❌ Wrong - causes full page reload
<a href="/dashboard">Dashboard</a>
  • URL 路径使用 kebab-case — 保持命名规范一致
// ✅ Good
{ path: 'user-profile', ... }

// ❌ Avoid
{ path: 'userProfile', ... }

评论

支持 Markdown