How to pass data from router component to children components in Aurelia?

Question

Lets say we have a component in Aurelia named UserRouter, which is a child router and handles routing to UserProfile, UserImages and UserFriends.

I want the UserRouter to load in the user from the API (on canActivate) and then pass this this user data to sub components.

Loading in the data is fine, how do I pass it down to sub components so they can all read it? e.g. placing an attribute on <router-view>.

I've tried the bindingContext argument on the bind() method of sub components but this hasn't worked.

Thanks

check out Patrick Walters' [post on sharing and passing state](http://patrickwalters.net/my-best-practices-in-aurelia/) — Matt McCabe, Jun 14 '15 at 08:59

score 6 · Answer 1 · answered Jul 16 '15 at 22:17

The way I did this, was by adding additional information to the child router definition eg:

configureRouter(config, router){
   config.map([
  { route: [''], name: 'empty', moduleId: './empty', nav: false, msg:"choose application from the left" },
  { route: 'ApplicationDetail/:id',  name: 'applicationDetail',   moduleId: './applicationDetail', nav: false, getPickLists : () => { return this.getPickLists()}, notifyHandler : ()=>{return this.updateHandler()} }
]);

in the first route from this example, I pass in a text message by adding my own porperty 'msg' to the route object. in the second route I pass in some event handlers, but could have been some custom objects or antything else.

In the childmodel I receive these additional elements in the activate() method:

export class empty{
  message;

  activate(params, routeconfig){
    this.message=routeconfig.msg || "";
  }
}

I guess in your case, you would add the user object to the child router definition.

in this case, how can we make getPickLists two way bindable, I mean anything changed in picklist inside child route can be reflected in parent as well? — Manoj Shevate, Dec 07 '16 at 07:18

score 3 · Answer 2 · answered Jul 15 '15 at 08:04

3

You could bind the router/user object to the <router-view>

<router-view router.bind="router"></router-view>

I have the same issue, so I'd love to see what you come up with!!

answered Jul 15 '15 at 08:04

Moose

152
1
11

score 2 · Answer 3 · answered Jun 10 '15 at 18:36

2

You could use the event aggregator to publish out an event with the data and the sub components could subscribe and listen for that event. This would avoid coupling between them. However, there may be a downside I'm not thinking of.

answered Jun 10 '15 at 18:36

AlignedDev

8,102
9
56
91

or using arelia-flux, which is more or less the same thing but a little bit neater imho – Painy James Sep 24 '15 at 14:55

score 1 · Answer 4 · answered May 26 '15 at 20:46

I worked out a solution for this, you simply tell the dependency injector to inject an instance of your parent router component using Parent.of(YourComponent).

import {inject, Parent} from 'aurelia-framework';
import {UsersRouter} from './router';

@inject(Parent.of(UsersRouter))
export class UserImages {
  constructor(usersRouter) {
      this.usersRouter = usersRouter;
  }

  activate() {
    this.user = this.usersRouter.user;
  }
}

You can also actually miss out the Parent.of part because the Aurelia DI system works its way up.

import {inject} from 'aurelia-framework';
import {UsersRouter} from './router';

@inject(UsersRouter)
export class UserImages {
  constructor(usersRouter) {
      this.usersRouter = usersRouter;
  }

  activate() {
    this.user = this.usersRouter.user;
  }
}

Be careful, if you navigate away from `UsersRouter` and then navigate back, you may get the old router, not the new one because `UsersRouter` may be dependency injected as a static-lifetime class which means the first one ever instantiated is the one that will be dependency injected everywhere. — Micah Zoltu, May 27 '15 at 01:04

Jose Luis · Answer 5 · 2016-07-12T03:56:59.213

You can implement a generic method to pass objects:

configureRouter(config, router){
    this.router = router;
    ...

    this.router.navigateWithParams = (routeName, params) => {
        let routerParams = this.router.routes.find(x => x.name === routeName);
        routerParams.data = params;
        this.router.navigate(routeName);
    }

}

then you can use it programmatically like:

goToSomePage(){
     let obj = { someValue: "some data", anotherValue: 150.44}
     this.router.navigateWithParams("someRoute", obj );
}

finally, you can get the param on the destination page:

 activate(urlParams, routerParams)
 {
      this.paramsFromRouter = routerParams.data;
 }

looks like the method name changed this.router.navigateToRoute('someRoute'', obj); — AlignedDev, Nov 02 '16 at 21:15

How to pass data from router component to children components in Aurelia?

5 Answers5