在Angular2中传递多个路径参数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Angular2中传递多个路径参数相关的知识,希望对你有一定的参考价值。

是否可以通过多个路径参数,例如像下面需要通过id1id2component B

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

答案

好意识到了一个错误..它必须是/: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中详述的那样,mayur和user3869623的答案现在与弃用的路由器有关。您现在可以传递多个参数,如下所示:

要呼叫路由器:

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

在routes.ts中:

 path: 'myUrlpath/:id1/:id2', component: componentToGoTo,
另一答案

两种方法在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"]);
 

另一答案
      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"]);
          
        

以上是关于在Angular2中传递多个路径参数的主要内容,如果未能解决你的问题,请参考以下文章

如何在Angular2的DELETE请求中传递参数

Angular 2 - 如何传递 URL 参数?

将组件作为“参数”传递给Angular 2中的另一个组件

通过Angular2路由器传递数据

Angular 2 可选路由参数

在 angular2 视图模板中传递枚举