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' }