3

我有一个组件，我需要在单击按钮时将数据传递给另一个组件，所以我[routerLink]在锚点中使用了这样的属性

<a [routerLink]="['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10></a>

在 app.route.ts 中定义了对应的路由

    {
    path: 'employeedetail/:name/:address/:detail3 /:detail4
    /:detail5 /:detail6/:detail7 /:detail8 /:detail9 /:detail10 ',
    component : employeedetailComponent
    }

在完美的世界中它应该可以工作，但它不会因为它给出一个错误说

zone.js:355Unhandled Promise 拒绝：不支持纯函数的参数数量：11；区域：; 任务：Promise.then；值：错误：纯函数的参数数量不受支持：11（...）错误：纯函数的参数数量不受支持：11

我对此进行了研究，发现当内联模板中有 10 个元素时 angular2 路由器失败，我通过删除 URL（detail10）中的最后一个参数进行了尝试并且没有错误。

问题是如何使用 [routerlink] 在 url 中传递这些大量参数，或者我应该使用不同的方法将数据从一个组件传递到另一个组件？

4

2 回答 2

1

您可以使用 queryParams 在 url 中传递参数。

<a [routerLink]="['/employeedetail' , name, address]" [queryParams]="{detail3: detail3, detail4: detail4}">Somewhere</a>

使用查询参数对于可选参数更好，它使您的 url 更具可读性。

于 2016-11-23T15:26:37.613 回答
0

向准备路由并传递结果的组件添加一个方法，而不是在模板中构建它

  class MyComponent {
    get employeeDetailLink() {
      return ['/employeedetail' , name, address, 
detail3 , detail4, detail5, detail6 , detail7, detail8 , 
detail9, detail10];
    }
  }

并像使用它一样

<a [routerLink]="employeeDetailLink"

最近取消了这个限制（不知道是否已经发布）https://github.com/angular/angular/pull/12710

另见https://github.com/angular/angular/issues/12233

于 2016-11-23T15:20:31.450 回答