首页 <a [routerLink]新时代国际app下载="['/products', productId]">产品详情
`routerLinkActive`指令可以方便地为当前活动路由的链接添加CSS类，实现高亮效果。 进阶路由特性：构建复杂应用导航 当应用规模增长时，基础路由可能不够用。Angular提供了一系列强大的进阶特性来处理更复杂的场景。 路由参数传递：数据随URL流动 路由参数是将数据嵌入导航流的关键方式，主要分为三种： * 路径参数（Path Parameters）：`/products/:id`。参数成为URL路径的一部分，通过`ActivatedRoute`服务的`snapshot.paramMap`或可观察对象`paramMap`获取。 * 查询参数（Query Parameters）：`/products?category=books&sort=price`。用于可选的过滤、排序等，通过`ActivatedRoute`的`snapshot.queryParamMap`或`queryParamMap`获取。 * 路由数据（Route Data）：在配置中通过`data`属性传递静态数据，如页面标题、权限码等。通过`ActivatedRoute`的`snapshot.data`或`data`获取。 | 参数类型 | 定义方式 | 典型用途 | 获取方式 | | :--- | :--- | :--- | :--- | | 路径参数 | `path: ‘detail/:id’` | 标识唯一资源，如商品ID、用户ID | `ActivatedRoute.paramMap` | | 查询参数 | `routerLink=”…” [queryParams]=”{page: 2}”` | 可选过滤、分页、排序 | `ActivatedRoute.queryParamMap` | | 路由数据 | `data: { title: ‘详情页’, auth: true }` | 传递静态元数据，如页面标题、权限要求 | `ActivatedRoute.data` | 路由守卫：导航的哨兵 路由守卫是控制导航是否允许发生的接口，如同应用中的安全检查站。 * `CanActivate`：决定是否可以进入某个路由。常用于身份认证检查。 * `CanActivateChild`：决定是否可以进入某个路由的所有子路由。 * `CanDeactivate`：决定是否允许离开当前路由。常用于阻止用户未保存就离开编辑页面。 * `Resolve`：在路由激活前执行，预先获取组件所需的数据。 * `CanLoad`：决定是否可以异步加载某个特性模块。保护惰性加载模块的入口。 通过实现对应的接口并注入服务，你可以精细控制导航的每一个环节。 惰性加载：按需加载，优化性能 对于大型应用，将所有代码打包成一个文件会严重影响初始加载速度。惰性加载允许你将应用拆分成多个独立的特性模块，仅在用户导航到相关路由时才加载这些模块的代码。