除了前面组件交互中提到的数据传递方法外,Angular路由还提供了路由参数功能,允许通过URL向组件传递参数。包括Path参数、Query参数、Matrix参数。这些参数可以通过ActivatedRoute服务提供的快照(snapshot属性)和 Observable对象两种方式获取。
Path参数
Path参数是通过解析URL的path部分来获取参数,在定义一个配置项path属性时,比如
{ path: 'date/:id', component: DateComponent }
,其中的:id是一个路由参数的令牌(Token),这部分可以作为参数传递到组件中。在组件中获取Path参数,需要导入ActivatedRoute服务。它可以这样用
<a routerLink="home/4">gg</a>
this.router.navigate(['home'],4);
this.router.navigateByUrl('list/4');
ActivatedRoute包含了已激活路由的信息:
url: 该路由路径的Observable对象。它的值是一个由路径中各个部件组成的字符串数组。
data: 该路由提供的data对象的一个Observable对象。还包含从resolve守卫中解析出来的值。
params: 包含该路由的必选参数和可选参数的Observable对象。
queryParams: 一个包含对所有路由都有效的查询参数的Observable对象。
fragment: 一个包含对所有路由都有效的片段值的Observable对象。
outlet: RouterOutlet的名字,用于指示渲染该路由的位置。对于未命名的RouterOutlet,这个名字是primary。
routeConfig: 与该路由的原始路径对应的配置信息。
parent: 当使用子路由时,它是一个包含父路由信息的ActivatedRoute对象。
firstChild: 包含子路由列表中的第一个ActivatedRoute对象。
children: 包含当前路由下激活的全部子路由。
官方文档中的一个例子,ActivatedRoute,通过使用subscribe
方法来检测params中参数的Tokenid
的变化
ngOnInit() {
this.activatedRoute.params
// (+) converts string 'id' to a number
//switchMap允许你在Observable的当前值上执行一个动作,并将它映射一个新的Observable。
.switchMap((params: Params) => this.service.getDate(+params['id']))
.subscribe(res => this.xxx = res);
}
当在组件中订阅一个可观察对象时,我们通常总是要在组件销毁时取消这个订阅。
但是也有少数例外情况不需要取消订阅。 ActivatedRoute中的各种可观察对象就是属于这种情况。
ActivatedRoute及其可观察对象都是由Router本身负责管理的。 Router会在不再需要时销毁这个路由组件,而注入进去的ActivatedRoute也随之销毁了。
如果只想取得值而不做任何其他操作,可以使用 ActivatedRouteSnapshot获取相关信息。
Query参数
URL的query部分不用于和配置项进行匹配,因此每一个配置项可以拥有任意多个查询参数。
query参数是通过ActivatedRoute中queryParams来获取的,和path参数的方式一样都是通过订阅来获取它的值和变化。同时queryParams是一块公共的区域,页面上的所有组件都可以访问。
查询参数queryParams可以通过RouterLink指令或跳转的方法来赋值,例
<a routerLink="/home" [queryParams]="{limit:5}">gg</a>
this.router.navigate(['/home'],{queryParams: {limit: 5}});
this.router.navigateByUrl('/home?limit=5');
Matrix参数
Matrix参数用于向指定组件传递参数,在链接参数数组中将要设置的参数以对象的形式放进去就好了。
<a [routerLink]="['/home',{name: 'Max'}]">gg</a>
//点进去就成这样 http://localhost:4200/home;name=Max
Matrix参数获取的方式和Path参数一样