Angular路由--路由参数

2019独角兽企业重金招聘Python工程师标准>>>

除了前面组件交互中提到的数据传递方法外，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参数一样

转载于:https://my.oschina.net/u/3412211/blog/897733