Angular 2 - send object from one component to another over router-link

Question

Im trying to send an object over router-link in angular 2. I create a person-profile component for every person object in my person array people and display them on my screen.

<div *ngFor="#person of people; #i = index">
    <person-profile  [person]="person"></person-profile>
</div>

The person-profile component displays several pieces of information contained in the person object. Im trying to send the entire person object from the person-profile component to a component named "map" using a router-link and passing the person object as a parameter.

<person-profile>
  ..code..
    <tr>
       <td class="category">Address</td>
       <td>{{ person.visiting_address }}</td>
       <td *ngIf="person.visiting_address"><a [routerLink]="['Map',{person:person}]">View on map</a></td>
    </tr>
..code..
<person-profile>

In my map component i retrieve the object with:

var person = <any> routeParams.get('person');

The problem is that i get the same person every time in the map component regardless of which <person-profile> i execute the router-link from. Its always the first person in the people list. The weird thing is that if i pass specific parameters from the person object it works. For instance, if i pass person.family_name instead of the the entire person object everything works but i want to send the entire object. Any suggestions?

Thanks!

Answer 1

AFAIK there is no way to pass objects because the source of the RouterLink class doesn't indicate any support for that and because the data needs to be presented in the URL string.

My suggestion is to pass an ID and share the users in a service that allows to fetch the concrete instance by ID.