How to pass data from parent Route to child Route in ngrx Angular2

Question

I am using @ngrx router and one of the routes has some child routers(basically passing the route parameter) as below:

{
path: '/browse',
component: BrowseComponent,
children: [
  {
    path: ':category',
    component: CategoryComponent
  }
]
}

The category parameter can have values such as "free", "top", "paid", which are routed to using a nav-bar.

But I want to add another category value called "all" to be added to the nav-bar which should be the default when the app navigates to "/browse" in which case (I think) I need to pass some data(an object actually) to the child-route (i.e., "/browse/all"). This data is required in child route (essentially the component of the child route) needs to call a service.

I tried with the index route by setting the CategoryComponent as the index for "/browse" as follows

{
path: '/browse',
component: BrowseComponent,
index: {
  component: CategoryComponent
},
children: [
  {
    path: ':path',
    component: CategoryComponent
  }
]
}

But still I am not sure how do I pass the data from the BrowseComponent to CategoryComponent. Any thoughts on how do I pass the data from Parent route component to child route component? Or am I doing it wrong and some other better approach can be used to add the all category in the child routes. Thanks

Answer 1

First when you using ngrx you need to think of your Store as ‘single source of truth’. That mean each time you fetch your data, you should retrieve it from the store.

This is right when you playing with your data inside your application.

But if your data come from the outside lets say, querystring, then you should save it to store (by dispatch an action) and the other component should fetch these data from the store.

In just angular you can do it by: https://angular.io/docs/ts/latest/cookbook/component-communication.html

That doesn't mean you not can use these data binding way just consider you have a Store where all your data should be stored.

In your case

  constructor(private store: Store<fromRoot.State>, route: ActivatedRoute) {
    this.actionsSubscription = route.params
      .select<string>('path')
      .map(path => new action.SomeAction(path))
      .subscribe(store);
  }

I hope it's was helpful.