用途
Angular Routing 用于在 Angular v20+ 应用中实现路由功能,包括导航设置、懒加载、函数式守卫、解析器以及路由参数处理。它适合需要为 Angular 应用配置页面跳转、受保护路由、数据预取和参数传递的开发场景。
主要能力
基础路由设置
通过 app.routes.ts 定义路由数组,使用 provideRouter(routes) 在 app.config.ts 中注册路由提供者。组件模板中使用 RouterOutlet、RouterLink、RouterLinkActive 实现路由出口与导航链接。支持重定向(redirectTo)与通配符路由(**)。
懒加载
支持按需加载整个特性模块(loadChildren)或单个组件(loadComponent),通过动态 import() 实现。
路由参数
推荐使用 Signal 输入(input())接收路由参数,需在 provideRouter 中启用 withComponentInputBinding()。查询参数同样可作为输入接收。替代方案是注入 ActivatedRoute,通过 toSignal 将 paramMap 或 queryParamMap 转换为 Signal。
函数式守卫
提供 CanActivateFn 类型的认证守卫(authGuard)与角色守卫(roleGuard),支持重定向并携带返回 URL。CanDeactivateFn 用于未保存更改提示,组件需实现 canDeactivate 方法。
解析器
使用 ResolveFn 在路由激活前预取数据,组件通过输入接收解析结果。
嵌套路由
父路由通过 children 定义子路由,父组件模板中使用 router-outlet 渲染子路由。
编程式导航
注入 Router 后可使用 navigate 进行导航,支持路径参数、查询参数、相对导航(relativeTo)以及替换历史记录(replaceUrl)。
路由数据
支持在路由配置中定义静态 data,组件可通过输入或 ActivatedRoute 访问。
路由事件
可订阅 Router.events,通过 filter 筛选 NavigationStart 与 NavigationEnd 等事件,用于跟踪导航状态。
使用方式
在 Angular v20+ 项目中,按需引入上述模式:先配置 app.routes.ts 与 app.config.ts,再在组件中使用路由指令或注入 Router、ActivatedRoute。守卫、解析器均以函数形式定义并注册到路由配置中。
适用场景
适用于 Angular v20+ 单页应用的导航搭建、受限页面保护、路由参数与查询参数处理、数据预取、未保存更改拦截、嵌套布局以及导航状态监听等。
限制
资料未提供该技能的安装方式、依赖要求、收费信息、平台支持范围或效果说明,这些内容暂未提供。