angular的路由
1、添加<base>元素:告诉路由器如何合成导航用的URL
<base hred="/"> // app文件夹是应用的跟目录
2、angular的路由是一个可选服务。在 @angular/router 包中,RouterModule.forRoot() 方法来配置路由器,它的返回值需要添加到imports数组中。
3、每个Route 都会有一个URL 的path 映射到一个组件。path不能以斜杠 / 开头。
4、两个特殊的路由:
{ path: '' , redirectTo: '/name', pathMatch: 'full' } // 路径的默认路径起点
{ path: '**', component: NameComponent } // ** 通配符
5、路由器使用 先匹配者优先的策略
6、路由出口:RouterOutlet
<router-outlet><router-Outlet> // 类似占位符的角色,匹配到的组件会替换他
7、路由的路径和参数可以通过一个 ActivateRouter 的路由服务来获取。
属性 | 说明 |
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 | 包含当前路由下所有已激活的子路由。 |
8、路由事件:
路由器事件 | 说明 |
NavigationStart | 本事件会在导航开始时触发。 |
RouteConfigLoadStart | 本事件会在 Router 惰性加载 某个路由配置之前触发。 |
RouteConfigLoadEnd | 本事件会在惰性加载了某个路由后触发。 |
RoutesRecognized | 本事件会在路由器解析完 URL,并识别出了相应的路由时触发 |
GuardsCheckStart | 本事件会在路由器开始 Guard 阶段之前触发。 |
ChildActivationStart | 本事件会在路由器开始激活路由的子路由时触发。 |
ActivationStart | 本事件会在路由器开始激活某个路由时触发。 |
GuardsCheckEnd | 本事件会在路由器成功完成了 Guard 阶段时触发。 |
ResolveStart | 本事件会在 Router 开始解析(Resolve)阶段时触发。 |
ResolveEnd | 本事件会在路由器成功完成了路由的解析(Resolve)阶段时触发。 |
ChildActivationEnd | 本事件会在路由器激活了路由的子路由时触发。 |
ActivationEnd | 本事件会在路由器激活了某个路由时触发。 |
NavigationEnd | 本事件会在导航成功结束之后触发。 |
NavigationCancel | 本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了 false。 |
NavigationError | 这个事件会在导航由于意料之外的错误而失败时触发。 |
Scroll | 本事件代表一个滚动事件。 |
9、ActivatedRoute 是一个可以注入的路由器服务,使用可观察对象来获取关于路由路径和路由参数的信息。
10、路由器中的关键词:
路由器部件 | 含义 |
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 组件,它根据路由器的导航来显示相应的视图。 |
gogogo