Angular 2中如何在路由中传递参数

Question

我有一个组件，在点击按钮时需要向另一个组件传递数据，因此我在锚点中使用了[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]传递这些大量的参数，或者我应该使用不同的方法来从一个组件传递数据到另一个组件？

- Dmehro

Answer 1

你可以使用查询参数在url中传递参数。

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

使用查询参数更适合可选参数，它可以使您的URL更易读。

- Alex Kojin

---

我的要求不是可选参数，而是必需参数，以便其他页面能够正常运行。 - Dmehro

Answer 2

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

  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

- Günter Zöchbauer

---

我该如何在其他页面中检索参数？我不确定是否可以使用 this.router.snapshot.params ["param1"]; 获取传递的参数值。 - Dmehro