Angular Routing 是一个面向 Angular v20+ 应用的路由实现技能,帮助开发者在应用中搭建页面导航、按需加载和访问控制。资料以代码示例为主,覆盖从基础配置到进阶模式的多种用法。
用途:用于在 Angular v20+ 应用中配置路由,实现导航结构、懒加载功能模块或组件、路由参数与查询参数读取、函数式守卫、路由解析器、嵌套路由和编程式跳转。
主要能力:
- 基础设置:通过 app.routes.ts 定义路由表,在 app.config.ts 中使用 provideRouter 注册,并在组件模板中使用 RouterOutlet、RouterLink、RouterLinkActive 完成导航与高亮。
- 懒加载:支持 loadChildren 按需加载功能路由集合,也支持 loadComponent 懒加载单个组件。
- 路由参数:推荐使用 Signal 输入(input())接收路由参数,需启用 withComponentInputBinding();也可通过 ActivatedRoute 配合 toSignal 读取 paramMap 与 queryParamMap。
- 函数式守卫:提供鉴权守卫、角色守卫和 CanDeactivate 未保存更改确认守卫示例,可在路由配置中通过 canActivate、canDeactivate 引用。
- 解析器:使用 ResolveFn 在路由激活前预取数据,组件中可通过 input 接收解析结果。
- 嵌套路由:父路由通过 children 配置子路由,父组件模板中放置 router-outlet 渲染子路由。
- 编程式导航:通过 inject(Router) 调用 navigate,支持路径参数、查询参数、相对当前路由导航以及 replaceUrl 替换历史记录。
- 路由数据与路由事件:可在路由上配置静态 data,并在组件中通过 input 或 ActivatedRoute 读取;可订阅 Router 的 NavigationStart、NavigationEnd 事件跟踪导航状态。
使用方式:资料以可直接参考的 TypeScript 与模板代码示例呈现,开发者按示例在路由文件、应用配置和组件中分别编写对应代码即可。需要路由参数直接映射到组件输入时,应在 provideRouter 中传入 withComponentInputBinding()。
适用场景:Angular v20+ 前端项目的导航搭建、受保护页面控制、功能模块按需加载、路由数据预取、参数化详情页以及编辑页离开确认等。
限制:资料仅针对 Angular v20+,未提供安装命令、依赖版本要求、性能数据或其他框架的适配说明;高级模式仅提示参考 references/routing-patterns.md,该文件的具体内容暂未提供;示例中的业务服务(如 Auth、User)为示意,具体实现暂未提供。