在Angular2中传递多个路径参数

77

是否可以传递多个路由参数，例如下面需要传递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"}]);
     }
}

angular angular2-routing

— 用户3869623
source

79

OK意识到一个错误..必须是 /: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"}]);
    }
}

— 用户3869623
source

这是相同的教程，请参见“路由”部分里的 angular.io/docs/ts/latest/cheatsheet.html

— Pardeep Jain

1

自从答案发布以来，很多东西已经改变了。您正在使用哪个版本的angular2？在ng2.0.0发行版中：`const myRoutes：Routes = [{path：'compBPath /：id1 /：id2'，component：MyCompB}]; 导出const myRouting：ModuleWithProviders = RouterModule.forChild（myRoutes）; 在NgModule中，@NgModule（{导入：[myRouting]，声明：[MyCompB]，}）导出类MyModule {}导出类MyCompA {onClick（）{this._router.navigate（['compBPath'，“ val1 “，” val2“]）；}}

— user3869623

1

我也同意@ user3869623，因为this._router.navigate（['MyCompB'，{id：“ someId”，id2：“另一个ID”}]））; 表示在@RouteConfig（[{path：'/ component /：id /：id2'，name：'MyCompB'，component：MyCompB}]）：id /：中，'id'和'id2'是可选的路由参数。 id2是必需的路由参数，尽管它们是动态的。因为，可选的路由参数不需要在RouterConfig中声明。

— Naeem Mushtaq，

58

正如此答案中详细说明的那样，mayur和user3869623的答案现在与已弃用的路由器有关。您现在可以按以下方式传递多个参数：

呼叫路由器：

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

在routes.ts中：

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

— trees_are_great
source

8

对于任何想知道的人，也可以在这些ID变量之间添加一些其他术语，以帮助创建更用户友好的URL。示例：this.router.navigate（['/ mypath'，“ firstId”，“ secondPath”，“ secondID”]）允许使用“ myPath / 4 / secondPath / 5”

— Eamon Bohan，

在模板中使用routerlink时，这也是可能的吗？我找不到解决方案。

— julien-100000 '18

1

@ julien-100000-是的，注释如下：[nsRouterLink] =“ ['/ myUrlPath'，'someId'，'另一个ID']”

— trees_are_great

3

@EamonBohan您保存了我整天的调查，您是真正的MVP，谢谢！！！

— Ovi Trif

10

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

— 安丘坎丹水下船
source

2

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

— 马约尔
source