Question

是否可以通过多个路线参数，例如如下所示，需要将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"}]);
     }
}

Answer 1

确定犯了一个错误..它必须是/:id/:id2

无论如何都没有在任何教程或其他StackOverflow问题中找到它。

@RouteConfig([{path: '/component/:id/:id2',name: 'MyCompB', component:MyCompB}])
export class MyCompA {
    onClick(){
        this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
    }
}

Answer 2

详见本answer，mayur＆amp; user3869623的答案现在与弃用的路由器有关。您现在可以按如下方式传递多个参数：

致电路由器：

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

在routes.ts中：

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

Answer 3

      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"}]);
          }
        }

Answer 4

两种在Angular中传递多个路径参数的方法

方法1

在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"]);
 }
}

方法2

在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"}]);
 }
}

在Angular2中传递多个路径参数

4 个答案: