SuperAPI AI 工具集

angular-routing

前端与建站

查看项目

更新于 10-16 03:52

技能介绍

用途

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+ 单页应用的导航搭建、受限页面保护、路由参数与查询参数处理、数据预取、未保存更改拦截、嵌套布局以及导航状态监听等。

限制

资料未提供该技能的安装方式、依赖要求、收费信息、平台支持范围或效果说明,这些内容暂未提供。