pass dynamic data to Component while routing

I would use a shared service. Is really the best approach in my humble opinion.

Check this: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

The example there is very self explanatory! :D

The service works with listeners, so you subscribe to it. And when both components are subscribed to it the flow of data is consistent and fluid. I used this approach myself to communicate between my back end server and 3 components in my App.

My data flow is the following:

1. Component A receives data from server. Stores it into an object and calls a method in a shared service passing this object.
2. Component B listens to this method and receives the data passed from Component A to the shared service.
3. Same approach with Component C.

Is this flow what you are looking for?

Update (saving data when reloading) :

Storing data options:

1. LocalStorage
2. Cookie
3. Session

Links:

• Retain data on page reload in Angular 2
• How to store token in Local or Session Storage in Angular 2?

Hope it helped! Good coding!

You can do so using Resolve; say you need to get user infos from your database through one of your services and need to display it in your details-component.

Resolving route datas will enable you to fetch datas before activating the selected route.

In your route config:

{
  path: 'user/:id',
  component: 'UserDetailComponent',
  resolve: {
    userProfile: "UserProfileResolverService"
  }
}

Your UserProfileResolverService would be:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from "@angular/router";
import { User } from "path";
import { UserService } from "path to your service";

@Injectable()
export class UserProfileResolverService implements Resolve<any>{

  constructor(private userService: UserService) { }

  resolve(route: ActivatedRouteSnapshot){

    return this.userService.getUser(route.paramMap.get('id'))
        .toPromise()
        .then(res =>{
          return res.json().data as User[];
        });

  }

}

For way more infos about resolving route datas read the excellent article by Pascal Precht: https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html