在 Angular2 中传递多个路由参数
Passing Multiple route params in 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"}]);
}
}
OK 发现错了..一定是/:id/:id2
无论如何在任何教程或其他 Whosebug 问题中都没有找到这个。
@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"}]);
}
}
如本 中所详述,mayur 和 user3869623 的答案现在与已弃用的路由器有关。您现在可以按如下方式传递多个参数:
呼叫路由器:
this.router.navigate(['/myUrlPath', "someId", "another ID"]);
在routes.ts中:
{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo},
在Angular
中传递多个路由参数的两种方法
方法一
在app.module.ts
将路径设置为component2。
imports: [
RouterModule.forRoot(
[ {path: 'component2/:id1/:id2', component: MyComp2}])
]
使用多个参数 id1 和 id2 调用路由器导航到 MyComp2。
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', "id1","id2"]);
}
}
方法二
在app.module.ts
将路径设置为component2。
imports: [
RouterModule.forRoot(
[ {path: 'component2', component: MyComp2}])
]
使用多个参数 id1 和 id2 调用路由器导航到 MyComp2。
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', {id1: "id1 Value", id2:
"id2 Value"}]);
}
}
是否可以传递多个路由参数,例如如下所示需要将 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"}]);
}
}
OK 发现错了..一定是/:id/:id2
无论如何在任何教程或其他 Whosebug 问题中都没有找到这个。
@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"}]);
}
}
如本
呼叫路由器:
this.router.navigate(['/myUrlPath', "someId", "another ID"]);
在routes.ts中:
{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo},
在Angular
中传递多个路由参数的两种方法方法一
在app.module.ts
将路径设置为component2。
imports: [
RouterModule.forRoot(
[ {path: 'component2/:id1/:id2', component: MyComp2}])
]
使用多个参数 id1 和 id2 调用路由器导航到 MyComp2。
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', "id1","id2"]);
}
}
方法二
在app.module.ts
将路径设置为component2。
imports: [
RouterModule.forRoot(
[ {path: 'component2', component: MyComp2}])
]
使用多个参数 id1 和 id2 调用路由器导航到 MyComp2。
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', {id1: "id1 Value", id2:
"id2 Value"}]);
}
}