angular6路由参数的传递与获取

1.访问路由链接：/test/id

路由配置：

{path: 'test/:id', component: TestComponent}

html传参:

<a href="javascript:void(0);" [routerLink] = "['/test', '121']">...</a>

ts传参：

this.router.navigate(['/test', '121']);//router为Router的实例

取参：

this.route.snapshot.params['id'] //route为ActivatedRoute的实例

 

2.访问路由链接：/test?id='121'

路由配置：

{path: 'test', component: TestComponent}

html传参:

<a href="javascript:void(0);" [routerLink] = "['/test']" [queryParams]="{id:'121'}">...</a>

ts传参：

this.router.navigate(['/test'],{ queryParams: { id: '121' });

取参：

this.route.snapshot.queryParams['id']

3.不通过路由链接

{
    path: '',
    component: InterviewSetComponent,
    data: {
      title: '标题',
    }
}

//取参

　this.route.snapshot.data.title;

 

如果想获取父路由或子路由的参数，可通过this.route.snapshot.parent 或 this.route.snapshot.children去获取（具体的console.log(this.route.snapshot）去查看）