如何将多个参数传递给Angular路由器?

时间:2018-09-17 14:43:32

标签: angular angular-ui-router

我知道我们可以这样做:

operator()

但是,我想为以下路径做些事情:

    { path:'/entity/:id/:action', component: EntityComponent }   

有什么想法吗?

谢谢。

--------更新了------

两者的用法:

    { path: '/entity/:id/sub-entity/:id2', component SubEntityComponent }

{ path: 'entity/:id/sub-entity/:id2', component: SubEntityComponent }

??

谢谢

3 个答案:

答案 0 :(得分:1)

在第二条路径中只有一个小的带引号的错字:

{ path: 'entity/:id/sub-obj/:id2', component: SubObjComponent }

您可以像这样绑定RouterLink:

<a [routerLink]="['/entity', id, 'sub-entity', id2]">SubEntityComponent</a>
<a [routerLink]="['/entity', id, 'sub-obj', id2]">SubObjComponent</a>

查看演示HERE

答案 1 :(得分:1)

const routes: Routes  = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'entity/:id/sub-entity/:id2',
        component: SubEntityComponent
    },
    {
        path: '/entity/:id/sub-entity/:id2',
        component SubEntityComponent
    }
];


// in component:

// '/entity/:id/:action'
const id; // your param
const action; // your action
this.router.navigate(['entity', id, action]);

// 'entity/:id/sub-entity/:id2'
const id; // your first param
const id2; // your second param
this.router.navigate(['entity', id, 'sub-entity', id2]);

答案 2 :(得分:-1)

在routes.ts文件中

{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo}, 

呼叫路由器

this.router.navigate(['myUrlPath/'+"someId"+"/"+"anotherID"]);