文中使用的工具或者包的版本:Angular CLI 11.0.6
文中 Demo 链接:https://stackblitz.com/edit/angular-route-params-xuspvu
一、路径参数
配置
{ path: 'route1/:id', component: Route1Component }
激活
<a [routerLink]="['/route1', 26]">route1</a>
或者:
this.router.navigate(['/route1', 26]);
URL
http://localhost:4200/route1/26
读取
const id = this.route.snapshot.params.id;
二、对象参数
配置
{ path: 'route2', component: Route2Component }
激活
<a [routerLink]="['/route2', { a: 1, b: 2 }]">route2</a>
或者:
this.router.navigate(['/route2', { a: 1, b: 2 }]);
URL
http://localhost:4200/route2;a=1;b=2
读取
const { a, b } = this.route.snapshot.params;
三、查询参数
配置
{ path: 'route3', component: Route3Component }
激活
<a [routerLink]="['/route3']" [queryParams]="{ a: 1, b: 2 }">route3</a>
或者:
this.router.navigate(['/route3'], { queryParams: { a: 1, b: 2 }});
URL
http://localhost:4200/route3?a=1&b=2
读取
const { a, b } = this.route.snapshot.queryParams;
四、data
配置
{ path: 'route4', component: Route4Component, data: { a: 1, b: 2 }}
读取
const { a, b } = this.route.snapshot.data;
五、resolve
配置
{ path: 'route5', component: Route5Component, resolve: { a: aResolver }}
@Injectable({ providedIn: 'root' })
export class aResolver {
resolve() {
return new Promise(res => {
setTimeout(() => { res(1); }, 3000);
});
}
}
读取
const { a } = this.route.snapshot.data;
六、总结
- 所有参数传递的方法可以一起使用;
- 路径参数、对象参数、查询参数会在 URL 上体现,在路由激活时传参;
- 配置 data 和 resolve 不影响 URL,在路由定义时传参;
- 当 resolve 返回 promise 时,路由会等到异步任务完成后再激活;