angular的路由设置以及传递参数

1、简单的设置

{
	path: 'index',
	component: IndexComponent
}

2、添加子路由

{
	path: 'index',
	component: IndexComponent,
	children: [{
		path: 'firstPage',
		component: FirstPageComponent
	}]
}

3、传递必要参数
detailId 应该是页面显示的必要数据，适用于多个列表向单个详情页面的跳转。

{
	path: 'detail/:detailId',
	component: DetailComponent
}

路由起始页传递参数的形式：

(1) import { router } from '@angular/router';
(2) private router : Router;
(3) this.router.navigate(['/detail', this.detailId])

路由目的页获取参数的形式：

(1) import { ActivatedRoute } from '@angular/router';
(2) private route : ActivatedRoute;
(3) this.route.snapshot.paramMap.get('detailId');

适用于绝对没有同页面间切换路由的情况；

4、传递可有可无的参数
传递一个参数对象，适用于多种不同参数情况下的下钻

{
	path: 'list',
	component: ListComponent
}

路由初始页传递参数的形式：

(1) import { router } from '@angular/router';
(2) private router : Router;
(3) this.router.navigate(['/ list', { startTime: '2019-7-12', endTime: '2019-7-22' }])

路由目的页获取参数的形式：

(1) import { ActivatedRoute } from '@angular/router';
(2) private route : ActivatedRoute;
(3) this.router.snapshot.params;   //{ startTime: '2019-7-12', endTime: '2019-7-22' }