RouterLinkActive 指令会基于当前的 RouterState 为活动的 RouterLink 切换所绑定的 css 类。
在每个 A 标签上,你会看到一个到 RouterLinkActive 的属性绑定,形如 routerLinkActive=”…”。
等号右边的模板表达式包含一些用空格分隔的 CSS 类名,当这个链接激活时,路由器将会把它们加上去(并在处于非活动状态时移除)。你还可以把 RouterLinkActive 设置为一个类组成的字符串,如 [routerLinkActive]=”‘active fluffy’”,或把它绑定到一个返回类似字符串的组件属性。
路由链接的激活状态会向下级联到路由树中的每个层级,所以,父子路由链接可能会同时激活。要覆盖这种行为,可以把 [routerLinkActiveOptions] 绑定为 { exact: true } 表达式,这样 RouterLink 只有当 URL 与当前 URL 精确匹配时才会激活。
在导航时的每个生命周期成功完成时,路由器会构建出一个 ActivatedRoute 组成的树,它表示路由器的当前状态。 你可以在应用中的任何地方用 Router 服务及其 routerState 属性来访问当前的 RouterState 值。
RouterState 中的每个 ActivatedRoute 都提供了从任意激活路由开始向上或向下遍历路由树的一种方式,以获得关于父、子、兄弟路由的信息。
该路由的路径和参数可以通过注入进来的一个名叫ActivatedRoute的路由服务来获取。 它有一大堆有用的信息,包括:
属性 | 说明 |
---|---|
url | 路由路径的 Observable 对象,是一个由路由路径中的各个部分组成的字符串数组。 |
data | 一个 Observable,其中包含提供给路由的 data 对象。也包含由解析守卫(resolve guard)解析而来的值。 |
paramMap | 一个 Observable,其中包含一个由当前路由的必要参数和可选参数组成的map对象。用这个 map 可以获取来自同名参数的单一值或多重值。 |
queryParamMap | 一个 Observable,其中包含一个对所有路由都有效的查询参数组成的map对象。 用这个 map 可以获取来自查询参数的单一值或多重值。 |
fragment | 一个适用于所有路由的 URL 的 fragment(片段)的 Observable。 |
outlet | 要把该路由渲染到的 RouterOutlet 的名字。对于无名路由,它的路由名是 primary,而不是空串。 |
routeConfig | 用于该路由的路由配置信息,其中包含原始路径。 |
parent | 当该路由是一个子路由时,表示该路由的父级 ActivatedRoute。 |
firstChild | 包含该路由的子路由列表中的第一个 ActivatedRoute。 |
children | 包含当前路由下所有已激活的子路由。有两个旧式属性仍然是有效的,但它们不如其替代品那样强力,建议不再用它们,它们还将在未来的 Angular 版本中废弃。 |
params | 一个 Observable 对象,其中包含当前路由的必要参数和可选参数。请改用 paramMap。 |
queryParams | 一个 Observable 对象,其中包含对所有路由都有效的查询参数。请改用 queryParamMap。 |
在每次导航中,Router 都会通过 Router.events 属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。下表中列出了全部导航事件:
路由器事件 | 说明 |
---|---|
NavigationStart | 本事件会在导航开始时触发。 |
RouteConfigLoadStart | 本事件会在 Router 惰性加载 某个路由配置之前触发。 |
RouteConfigLoadEnd | 本事件会在惰性加载了某个路由后触发。 |
RoutesRecognized | 本事件会在路由器解析完 URL,并识别出了相应的路由时触发 |
GuardsCheckStart | 本事件会在路由器开始 Guard 阶段之前触发。 |
ChildActivationStart | 本事件会在路由器开始激活路由的子路由时触发。 |
ActivationStart | 本事件会在路由器开始激活某个路由时触发。 |
GuardsCheckEnd | 本事件会在路由器成功完成了 Guard 阶段时触发。 |
ResolveStart | 本事件会在 Router 开始解析(Resolve)阶段时触发。 |
ResolveEnd | 本事件会在路由器成功完成了路由的解析(Resolve)阶段时触发。 |
ChildActivationEnd | 本事件会在路由器激活了路由的子路由时触发。 |
ActivationEnd | 本事件会在路由器激活了某个路由时触发。 |
NavigationEnd | 本事件会在导航成功结束之后触发。 |
NavigationCancel | 本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了 false。 |
NavigationError | 这个事件会在导航由于意料之外的错误而失败时触发。 |
Scroll | 本事件代表一个滚动事件。 |
当启用了 enableTracing 选项时,这些事件也同时会记录到控制台中。要想查看对路由导航事件进行过滤的例子,请访问 Angular 中的可观察对象一章的路由器部分
该应用有一个配置过的路由器。 外壳组件中有一个 RouterOutlet,它能显示路由器所生成的视图。 它还有一些 RouterLink,用户可以点击它们,来通过路由器进行导航。
下面是一些路由器中的关键词汇及其含义:
路由器部件 | 含义 |
---|---|
Router(路由器) | 为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航 |
RouterModule | 一个独立的 NgModule,用于提供所需的服务提供商,以及用来在应用视图之间进行导航的指令。 |
Routes(路由数组) | 定义了一个路由数组,每一个都会把一个 URL 路径映射到一个组件。 |
Route(路由) | 定义路由器该如何根据 URL 模式(pattern)来导航到组件。大多数路由都由路径和组件类构成。 |
RouterOutlet(路由出口) | 该指令(<router-outlet> )用来标记出路由器该在哪里显示视图。 |
RouterLink(路由链接) | 这个指令把可点击的 HTML 元素绑定到某个路由。点击带有 routerLink 指令(绑定到字符串或链接参数数组)的元素时就会触发一次导航。 |
RouterLinkActive(活动路由链接) | 当 HTML 元素上或元素内的routerLink变为激活或非激活状态时,该指令为这个 HTML 元素添加或移除 CSS 类。 |
ActivatedRoute(激活的路由) | 为每个路由组件提供提供的一个服务,它包含特定于路由的信息,比如路由参数、静态数据、解析数据、全局查询参数和全局碎片(fragment)。 |
RouterState(路由器状态) | 路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。 |
链接参数数组 | 这个数组会被路由器解释成一个路由操作指南。你可以把一个RouterLink绑定到该数组,或者把它作为参数传给Router.navigate方法。 |
路由组件 | 一个带有RouterOutlet的 Angular 组件,它根据路由器的导航来显示相应的视图。 |
本文地址:https://www.zhuimengzhu.com/details/210.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。