angular 2 passing params in route

Question

I have a component from where i need to pass data to another component on click of button so I have used [routerLink] property in anchor like this

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

defined corresponding route in app.route.ts

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

In perfect world it should work but it does not as it given an error saying

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

I researched about this and found that angular2 router fails when there are 10 elements in inline template ,I tried out by removing last param in URL (detail10) and no error .

Question is how to pass these large number of params in url using [routerlink] or should I be using different approach for passing data from one component to another component ?

score 1 · Answer 1 · answered Nov 23 '16 at 15:26

1

You can use queryParams to pass params in the url.

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

Using query params are better for optional params, it makes your url more readable.

answered Nov 23 '16 at 15:26

Alex Kojin

5,044
2
29
31

my requirement is not for optional params, it kind of required params in order for other page to function properly – Dmehro Nov 23 '16 at 18:51

score 0 · Answer 2 · answered Nov 23 '16 at 15:20

Add a method to the component that prepares the route and pass the result instead of building it in the template

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

and use it like

<a [routerLink]="employeeDetailLink"

This limitation was removed recently (don't know if it's already released) https://github.com/angular/angular/pull/12710

See also https://github.com/angular/angular/issues/12233

how do i retrieve params back on other page , I am not sure if I can use `this.router.snapshot.params["param1"];` to get passed param values — Dmehro, Nov 23 '16 at 18:52

angular 2 passing params in route

2 Answers2