Object/array passing in the RouteParams via Routing angular2

Question

Working on Routing in angular2. actually i know we can send key/value using RouteParams in the routing but i want to send whole object/array in the RouteParams, i don't know is it possible or not. is there any way to do so if not then any alternate who knows ?

my current HTML part is :

<div *ngFor="#books of getBooks_array #i=index">
    <a [routerLink]="['/IssueBook', {name: books.book_name, isbn: books.book_ISBN,author: books.book_author, price: books.book_price, id: books.book_id, language: books.book_language}]"></a>
</div>

my current .ts conatins:

constructor(@Inject(RouteParams) params:RouteParams, @Inject(Http) http:Http){
        this.name= params.get('name');
        this.id= params.get('id');
        this.language= params.get("language");
        this.price= params.get("price");
        this.author= params.get("price");
        this.isbn= params.get("isbn");
}

but i want to send RouteParams like this :

<div *ngFor="#books of getBooks_array #i=index">
<a [routerLink]="['/IssueBook', {data: books}]">Books</a>
</div>

and i am trying to get data like this:

constructor(@Inject(RouteParams) params:RouteParams, @Inject(Http) http:Http){
        this.data= params.get('data');
}

but i am getting error :

What happends when you change the routeconfig to: {path:'/ListGridView/List-View/:data', name: 'IssueBook', component: IssueBookComponent} ? — Poul Kruijt
– Poul Kruijt, Commented Dec 23, 2015 at 10:24
You can serialize your object With JSON.stringify ( {data: JSON.stringify(books)} .. but it's not a good idea Routers params are intented to be url params ( integers , strings ) .. so it's not a good idea to serialize a hole Object — Mourad Zouabi
– Mourad Zouabi, Commented Dec 23, 2015 at 11:53
If the book_id is unique, just send that, then have your new route get the book data from a service. — Mark Rajcok
– Mark Rajcok, Commented Dec 23, 2015 at 15:48
@MarkRajcok yes i can this way but due to some reasons i have to send whole data via Params. — Pardeep Jain
– Pardeep Jain, Commented Dec 23, 2015 at 16:21

Chris · Accepted Answer · 2016-04-07 08:54:45Z

2

You can pass Objects to Url's in Angular2, but it's not really supported. The get-Method on routeParams only returns a string-representation, so you would get a string like "[Object]". If you want to access the passed data, you need to use the params-Property:

constructor(@Inject(RouteParams) params:RouteParams, @Inject(Http) http:Http){
    this.data= params.params.data;
}

But beware, this only works properly the first time you call the route. If you call the route anothertime with different data, it can happen that params.params.data returns your old data although you put new data into the route.

answered Apr 7, 2016 at 8:54

Chris

4931 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pardeep Jain Over a year ago

than why to use if it only works for first time ? btw what is this second params in params.params.data ?

Chris Over a year ago

I use it for "one-time" routes, like from a "Create"-Page to an "Overview" to pass data. The Second params is the Params-Map of the RouteParams object, where all passed params are held

Pardeep Jain Over a year ago

ohh okay but i don't think this is too much beneficial for normal use because we have to load page again and again instead of one time, still thanks for answer

Chris Over a year ago

If you want to share data several times between routes, the only solution that really works is using a common service that holds the data.

Collectives™ on Stack Overflow

Object/array passing in the RouteParams via Routing angular2

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related