路由与导航
在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。
概览
Angular 的 Router（即“路由器”）把浏览器中的 URL 看做一个操作指南， 据此导航到一个视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。
路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作。
基础知识
base href元素，来告诉路由器该如何合成导航用的 URL。
需要在index.html的 <head> 标签下先添加一个 <base> 元素。
src/index.html
<base href="/">
从路由库中导入
Angular 的路由器是一个可选的服务，它用来呈现指定的 URL 所对应的视图。 它并不是 Angular 核心库的一部分，而是在它自己的 @angular/router 包中。
src/app/app.module.ts
import { RouterModule, Routes } from '@angular/router';
配置
路由器需要先配置才会有路由信息。 下面的例子创建了五个路由定义，并用 <font size=5>RouterModule.forRoot</font> 方法来配置路由器， 并把它的返回值添加到 AppModule 的 imports 数组中。
src/app/app.module.ts
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{
path:'portal',
loadChildren: './settings/settings.module#SettingsModule'
}
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
这里的路由数组 appRoutes 描述如何进行导航。 把它传给 RouterModule.forRoot 方法并传给本模块的 imports 数组就可以配置路由器。
每个 Route 都会把一个 URL 的 path 映射到一个组件。
注意，path 不能以斜杠（/）开头，可以以(../)开头。
第二个路由中的 :id 是一个路由参数的令牌(Token)。比如 /hero/42 这个 URL 中，“42”就是 id 参数的值。
第三个路由中的 data 属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如 页标题、面包屑以及其它静态只读数据。
第四个路由中我们没有将 ettingsModule导入到我们的 AppModule 中，而是通过 loadChildren 属性来告诉 Angular 路由依据 loadChildren 属性配置的路径去加载 SettingsModule 模块。这就是模块懒加载功能的具体应用，当用户访问 /settings/** 路径的时候，才会加载对应的 SettingsModule 模块，这减少了应用启动时加载资源的大小。
另外我们传递一个字符串作为 loadChildren 的属性值，该字符串由三部分组成：
（1）需要导入模块的相对路径
（2）# 分隔符
（3）导出模块类的名称
第五个路由中的空路径（''）表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。 这个默认路由会重定向到 URL /heroes，并显示 HeroesListComponent。
最后一个路由中的 ** 路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。
这些路由的定义顺序是刻意如此设计的。路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它能匹配上每一个 URL，因此应该只有在前面找不到其它能匹配的路由时才匹配它。
如果你想要看到在导航的生命周期中发生过哪些事件，可以使用路由器默认配置中的 enableTracing 选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。 这应该只用于调试。你只需要把 enableTracing: true 选项作为第二个参数传给 RouterModule.forRoot()方法就可以了。
路由数组
Routes是路由配置数组。每个都有以下属性：
-
path是路由匹配的路径。 -
pathMatch是指定匹配策略的字符串。pathMatch:'full'表示完全匹配 -
matcher定义了路径匹配并取代自定义策略path和pathMatch。 -
component是组件类型。 -
redirectTo是将替换当前匹配段的url片段。 -
outlet是组件应放入的插座的名称。 -
canActivate控制是否允许进入路由。。 -
canActivateChild等同canActivate，只不过针对是所有子路由。。 -
canDeactivate控制是否允许离开路由。 -
canLoad控制是否允许延迟加载整个模块。 -
data是提供给组件的附加数据，被激活路由访问。 -
resolve是用于查找数据解析器的DI令牌的映射。 -
children是子路由定义的数组。 -
loadChildren是对延迟加载子路由的引用。
注意：路由守卫对于权限控制非常便利，当然其粒度当然只能在页面层级。倘若需要对按钮粒度也只能利用指令的方式，而二者的结合可以极大的改善权限控制埋点的代码量。
RouterModule.forChild()
RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。
- 友情提示：根模块中使用 forRoot()，子模块中使用 forChild()
这个功能非常强大，因为我们不必在一个地方（我们的主模块）定义所有路由信息。反之，我们可以在特性模块中定义模块特有的路由信息，并在必要的时候将它们导入我们主模块。RouterModule.forChild() 的使用方法如下：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
export const ROUTES: Routes = [
{
path: 'settings',
component: SettingsComponent,
///settings 设置页面下有 /settings/profile 和 /settings/password 两个页面
children: [
{ path: 'profile', component: ProfileSettingsComponent },
{ path: 'password', component: PasswordSettingsComponent }
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
// ...
})
export class ChildModule {}
通过以上示例，我们知道在主模块和特性模块中，路由配置对象的类型是一样的，区别只是主模块和特性模块中需调用不同的方法，来配置模块路由。
路由出口
RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。
<router-outlet></router-outlet>
<!-- Routed components go here -->
有了这份配置，当本应用在浏览器中的 URL 变为 /heroes 时，路由器就会匹配到 path 为 heroes 的 Route，并在宿主视图中的RouterOutlet之后显示 HeroListComponent 组件。
- 多个路由区域
1.路由配置
const routes: Routes = [
{ path: 'news',
component: NewsComponent,
outlet:'let1'
}
{ path: 'news',
component: News2Cmponent,
outlet:'let2'
}]
2.html点击链接
<a routerLink = "[{ outlets: { let1: ['news'] } }]"></a>
<a routerLink = "[{ outlets: { let2: ['news'] } }]"></a
3.html路由出口
<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>
即访问 /news/ 时同时加载 NewsComponent 和 News2Cmponent 两个组件
路由器链接
现在，你已经有了配置好的一些路由，还找到了渲染它们的地方，但又该如何导航到它呢？固然，从浏览器的地址栏直接输入 URL 也能做到，但是大多数情况下，导航是某些用户操作的结果，比如点击一个 A 标签。
考虑下列模板：
src/app/app.component.html
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
a 标签上的 <font size=5>RouterLink</font> 指令让路由器得以控制这个 a 元素。 这里的导航路径是固定的，因此可以把一个字符串赋给 routerLink（“一次性”绑定）。
routerLink第一个路径片段可以以 / ，./ 或 ../ 开头：
如果以
/开头，路由将从根路由开始查找如果以
./开头或没有使用/，则路由将从当前激活路由的子路由开始查找如果以
../开头，路由往上一级查找
如果需要更加动态的导航路径，那就把它绑定到一个返回链接参数数组的模板表达式。 路由器会把这个数组解析成完整的 URL。
例如使用 ['/team', teamId, 'user', userName, {details: true}] 数组，意味着我们想要生成一个链接到 /team/11/user/bob;details=true 。
- ts中跳转写法
import { Router } from '@angular/router';
// ...
constructor(private router: Router) {}
// ...
this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);
navigateByUrl 方法指向完整的绝对路径
路由链接的激活状态
<a routerLink="/user/bob" routerLinkActive="active">Bob</a>
RouterLinkActive 指令：当 URL 地址是 /user 或 /user/bob 时，当前的 RouterState 为活动状态，active 类将会被添加到 <a> 标签上。如果 URL 发生变化，则 active类将自动从 <a> 标签上移除。
路由链接的激活状态会向下级联到路由树中的每个层级，所以，父子路由链接可能会同时激活。
只有当 URL 与当前 URL 精确匹配时才会激活，可以把 [routerLinkActiveOptions] 绑定为 { exact: true } 表达式。
路由器状态
路由器的当前状态（RouterState）：在导航时的每个生命周期成功完成时，路由器会构建出一个 ActivatedRoute 组成的树。
你可以在应用中的任何地方用 Router 服务及其 routerState 属性来访问当前的 RouterState 值。
RouterState 中的每个 ActivatedRoute 都提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。
class MyComponent {
constructor(router: Router) {
const state: RouterState = router.routerState;
const snapshot: RouterStateSnapshot = state.snapshot;
const root: ActivatedRouteSnapshot = snapshot.root;
const child = root.firstChild;
const id: Observable<string> = child.params.map(p => p.id);
//...
}
}
激活的路由
该路由的路径和参数可以通过注入进来的一个名叫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 |
包含当前路由下所有已激活的子路由。 |
//获取路由参数
private route: ActivatedRoute,
this.username = this.route
.queryParamMap
.pipe(map(params => this.username = params.username));
路由事件
在每次导航中，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 中的可观察对象一章的路由器部分
路由守卫
适用于后台管理等需要登录才能使用的模块
- 创建一个认证服务
// app/auth.service.ts
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
@Injectable()
export class AuthService implements CanActivate {
canActivate() {
// 这里判断登录状态, 返回 true 或 false
return true;
}
}
- 添加或修改路由配置
// app/app.router.ts
// 增加 CanActivate
import { CanActivate ... } from '@angular/router';
// 配置中增加 canActivate 如:
{ path: 'admin', canActivate:[AuthService] ... }
总结一下
该应用有一个配置过的路由器。 外壳组件中有一个 RouterOutlet，它能显示路由器所生成的视图。 它还有一些 RouterLink，用户可以点击它们，来通过路由器进行导航。
下面是一些路由器中的关键词汇及其含义：
| 路由器部件 | 含义 |
|---|---|
Router（路由器） |
为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航。ts->this.router.navigateByUrl("/protel")
|
RouterModule |
一个独立的 Angular 模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。ts->RouterModule.forRoot(Routers数组，ExtraOptions对象)
|
Routes（路由数组） |
定义了一个路由数组，每一个都会把一个 URL 路径映射到一个组件。ts->[(path:'',componet: ***)]
|
Route（路由） |
定义路由器该如何根据 URL 模式（pattern）来导航到组件。大多数路由都由路径和组件类构成。 |
RouterOutlet（路由出口） |
该指令（<router-outlet>）用来标记出路由器该在哪里显示视图。 |
RouterLink（路由链接） |
这个指令把可点击的 HTML 元素绑定到某个路由。点击带有 routerLink 指令（绑定到字符串或链接参数数组）的元素时就会触发一次导航。html-><a [routerLink]="[./order]"></a>
|
RouterLinkActive（活动路由链接） |
当 HTML 元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个 HTML 元素添加或移除 CSS 类。html中
|
ActivatedRoute（激活的路由） |
为每个路由组件提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。ts中
|
RouterState（路由器状态） |
路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。 |
| 链接参数数组 | 这个数组会被路由器解释成一个路由操作指南。你可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。 |
| 路由组件 | 一个带有RouterOutlet的 Angular 组件，它根据路由器的导航来显示相应的视图。 |
