一 路由
1路由参数获取
路由参数的获取有两张形式：
import { Router, ActivatedRoute, ParamMap } from ‘@angular/router‘;
import ‘rxjs/add/operator/switchMap‘;
方式一：
this.hero$ = this.route.paramMap
.switchMap((params: ParamMap) =>
this.service.getHero(params.get(‘id‘)));
这种场景比较特殊，他是将参数作为观察对象，以流的形式处理，当多次跳转（参数不同）的路由是共用一个component实例时。
典型场景：浏览某个item的具体信息，返回到列表后，要将列表中对应的item 高亮显示。
方式二：
let id = this.route.snapshot.paramMap.get(‘id‘);
this.hero$ = this.service.getHero(id);
这种方式适用于一般场景，路由每次都会是一个全新的component 。
2可选参数
写在path中的参数是必选的，其他任何都是可选的。传递参数，获取参数的形式 和必选参数完全一样。
this.router.navigate([‘/heroes‘, { id: heroId, foo: ‘foo‘ }]);
localhost:3000/heroes;id=15;foo=foo
3相对路径跳转（规范）
Ts中：
this.router.navigate([‘../‘, { id: crisisId, foo: ‘foo‘ }], { relativeTo: this.route });
Html中：
routerLink直接可用
l RouterLink
经过测试下面的情况，一组routerLink是跳转到一组对应的子路由中（跳转到某个子路由）
因为你点击的是父页面，自然就以当前的父路由为相对
<p>
<button routerLink="summery" routerLinkActive="test-border">班级总体情况</button>
<button routerLink="qsAnalysis" routerLinkActive="test-border">试题分析</button>
<button routerLink="knowledgePoints" routerLinkActive="test-border">班级各知识点表现</button>
</p>
<router-outlet></router-outlet>
如报告页面，报告下面有很多子路由（总体分析，试题分析，知识点分析）
4全局路由参数
定义一些所有路由都可用的参数（即全局参数）：
let navigationExtras: NavigationExtras = {
queryParams: { ‘session_id‘: sessionId },
};
this.router.navigate([‘/login‘], navigationExtras);
这样传递的就是全局参数了
http://localhost:4202/login?id=xjx
查询：
this.route.queryParamMap.map(params => params.get(‘session_id‘) || ‘None‘);
this.route.fragment.map(fragment => fragment || ‘None‘);
//返回Observable<string>
难道只能这样获取吗，能不能通过快照的方式获取？当然可以，不过不是paramMap了而是这样：
this.route.snapshot.queryParamMap.get(‘id‘);
如何传递给下一个路由？
//传递给下一个路由：
let navigationExtras: NavigationExtras = {
queryParamsHandling: ‘preserve‘ //改参数表示路由参数的处理策略，还有merge等
};
// Redirect the user
this.router.navigate([redirect], navigationExtras);
通过routerLink如何传参给子路由？
<button
routerLink="summery"
queryParamsHandling="preserve"
routerLinkActive="test-border">班级总体情况</button>
这样就行了！
二 路由守卫
canDeactive 能否离开
路由里面：canDeactivate:[DeactiveGuard]
服务：providers:[DeactiveGuard]
实现如下：
@Injectable()
export class DeactiveGuard implements CanDeactivate<VedioAndDocumentComponent> {
canDeactivate(component: VedioAndDocumentComponent,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot){
return component.canDeactive();
}
}
主要是实现这个接口。注意接口的泛型是VedioAndDocumentComponent，视乎这样才可以在方法中注入component，这是专门用于该特定组件的守卫。
公用守卫：
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
这样的守卫就可以被复用。
canActivate, canActiveChild能否激活
canActivate: [AuthGuard],
@Injectable()
export class AuthGuard implements CanActivate {
canActivate() {
console.log(‘AuthGuard#canActivate called‘);
return true;
}
}
不需要某个泛型
path: ‘‘,
canActivateChild: [AuthGuard],
children: [ ... ...
上例中是对路由分组的一个方法，无组件，无多余路径。
对所有子路由做激活前校验。
export class AuthGuard implements CanActivateChild {
constructor(private authService: AuthService, private router: Router) {}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return true;
}
}
Resolve预加载
resolve: {
crisis: CrisisDetailResolver
}
表示加载这个路由前，必选先加载数据crisis
export class CrisisDetailResolver implements Resolve<Crisis> {
... ...
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
方法同样返回泛型的具体对象，或promise, observable.
Promise可以阻止路由被加载，直到数据获取完毕
Observable 必须 complete，否则导航不会继续
最后还要注入resolve服务。
三 路由其他信息
常见配置
{ path: ‘**‘, component: PageNotFoundComponent }
必须写在最后面！
这是通配符路由，将所有无法识别的路由路径，导向指定的component，防止报错。
由于匹配是按声明顺序来的，建议这类路由不写在特性模块中（会屏蔽所有的后续特性模块）。
{ path: ‘‘, redirectTo: ‘/heroes‘, pathMatch: ‘full‘ },
输入localhost:3000导航到“首页”
pathMatch:’prefix’
Index页面<base href=’/’>
410 Gone
404 not found
配置路由时，path不能以斜杠（/）开头
data: { title: ‘Heroes List‘ }
路由配置中 data属性
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
]
ActivatedRoute属性
路由参数说明：
有两个旧式属性仍然是有效的，但它们不如其替代品那样强力，我们建议你不要再用它们，并且将在未来的 Angular 版本中废弃。
params —— 一个Observable对象，其中包含当前路由的必要参数和可选参数。请改用paramMap。
queryParams —— 一个Observable对象，其中包含对所有路由都有效的查询参数。请改用queryParamMap。
父子页面
parent
当该路由是一个子路由时，表示该路由的父级ActivatedRoute。
firstChild
包含该路由的子路由列表中的第一个ActivatedRoute。（应该是被激活的第一层）
children
包含当前路由下所有已激活的子路由。（应该指的是多层路由）
routerOutlet routerLinkActive
路由事件
