angular从入门到精通（五） — 路由事件 - 追梦猪提供高效的web前端解决方案

五、路由事件

路由链接的激活状态

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 组件，它根据路由器的导航来显示相应的视图。