pass data to Angular routed components

 https://stackoverflow.com/questions/36835123/how-do-i-pass-data-to-angular-routed-components

https://angular.io/guide/router

update 4.0.0

See Angular docs for more details https://angular.io/guide/router#fetch-data-before-navigating

original

Using a service is the way to go. In route params you should only pass data that you want to be reflected in the browser URL bar.

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

The router shipped with RC.4 re-introduces data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Route.data can be subscribed to get data information, this is handy, when you have a route

guard with each route, so on that route guard u can check the this.route.data.subscribe

to ensure the route is being triggered by application(It is Safe)

const routes: Routes = [
    {
        path: '',
        canActivateChild: [routeGuard],
        childiren [...]

   }
  { path: '404'..}]