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）去查看）