在 Angular2中传递多个路由参数

是否可能传递多个路由参数，例如下面需要将 id1和 id2传递给 component B

@RouteConfig([
{path: '/component/:id :id2',name: 'MyCompB', component:MyCompB }
])
export class MyCompA {
onClick(){
this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
}
}
139770 次浏览
小开
最佳答案

OK realized a mistake .. it has to be /:id/:id2

Anyway didn't find this in any tutorial or other StackOverflow question.

@RouteConfig([{path: '/component/:id/:id2',name: 'MyCompB', component:MyCompB}])
export class MyCompA {
onClick(){
this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
}
}
小开 
      new AsyncRoute({path: '/demo/:demoKey1/:demoKey2', loader: () => {
return System.import('app/modules/demo/demo').then(m =>m.demoComponent);
}, name: 'demoPage'}),
export class demoComponent {
onClick(){
this._router.navigate( ['/demoPage', {demoKey1: "123", demoKey2: "234"}]);
}
}
小开

As detailed in this answer, mayur & user3869623's answer's are now relating to a deprecated router. You can now pass multiple parameters as follows:

To call router: 

this.router.navigate(['/myUrlPath', "someId", "another ID"]);

In routes.ts: 

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

Two Methods for Passing Multiple route params in Angular

Method-1

In app.module.ts

Set path as component2.

imports: [
RouterModule.forRoot(
[ {path: 'component2/:id1/:id2', component: MyComp2}])
]

Call router to naviagte to MyComp2 with multiple params id1 and id2.

export class MyComp1 {
onClick(){
this._router.navigate( ['component2', "id1","id2"]);
}
}

Method-2

In app.module.ts

Set path as component2.

imports: [
RouterModule.forRoot(
[ {path: 'component2', component: MyComp2}])
]

Call router to naviagte to MyComp2 with multiple params id1 and id2.

export class MyComp1 {
onClick(){
this._router.navigate( ['component2', {id1: "id1 Value", id2:
"id2  Value"}]);
}
}

提交答案