angular 路由传参

import { ActivatedRoute, Router }from '@angular/router';

private route: ActivatedRoute;
private router: Router ;

路由必填参数

// 路由配置
{ path: 'detail/:id', component: DetailComponent }

// 传参方式
<a [routerLink]="['/detail', detail.id]"></a>
this.router.navigate(['/detail', this.detail.id]);

// 读取参数
this.route.snapshot.paramMap.get('id');

// 页面路径
`http://localhost:4200/detail/1

路由可选参数

// 路由配置
{ path: 'detail', component: DetailComponent }

// 传参方式
<a [routerLink]="['/detail', {age: 18, male: true}]"></a>
this.router.navigate(['/detail',  {age: 18, male: true}]);

// 读取参数
this.route.snapshot.paramMap.get('age');
this.route.snapshot.paramMap.get('male');

// 页面路径
`http://localhost:4200/detail;age=18;male=true

路由查询参数

// 路由配置
{ path: 'detail', component: DetailComponent }

// 传参方式
<a [routerLink]="['/detail']" [queryParams]=" {age: 18, male: true}"></a>
this.router.navigate(['/detail'], {queryParams: {age: 18, male: true}});

// 读取参数
this.route.snapshot.queryParamMap.get('age');
this.route.snapshot.queryParamMap.get('male');

// 页面路径
`http://localhost:4200/detail?age=18&male=true