javascript - Angular 2在 route 传递参数

Question

我有一个组件，我需要在点击按钮时将数据传递给另一个组件，所以我在这样的 anchor 中使用了 [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 rejection: Unsupported number of argument for pure functions: 11 ; Zone: ; Task: Promise.then ; Value: Error: Unsupported number of argument for pure functions: 11(…) Error: Unsupported number of argument for pure functions: 11

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

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

Answer 1

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

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

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