Route params as component bindables

Framework Knowledge
1

Hi

Is there a way, to bind route params directly as input bindables for components?

// route
{ route: 'users/detail/:userid', name: 'userDetail', moduleId: 'user-detail' }

// user-detail.ts
export class UserDetail {
   @bindable
   userid: string;
}

I know that I can get route params in components with the “activate” hook, but we would like to have no routing information in our components. We did that in AngularJs with Angular Ui Router and we were pretty happy with it. In AngularJs it was like:

.state('user-detail', {
	url: '/users/detail/:userid',
	resolve: {
		userid: ['$transition$', (t: any) => t.params().userid]
	},
	component: 'userDetail'
})
1 Like
2

Because of the silence in this thread and further investigations by me, I assume that there is no easy solution available with standard aurelia features. Does anyone have an idea where I should start to implement this with a hook, plugin or something similar?

1 Like
3

Hmm perhaps @jwx can give you some hints on where to start.

From a testing perspective though keep in mind that moving the assigning away could create additional overhead, which was also troublesome with AngularUi router

1 Like
4

@elitastic you can create a custom decorator to do what you what. Imaginary usage would look like this:

@fromActivate({
  // userId is the target bindable property we want to assign a value to
  userId: (params) => params.userId,
  ...
})
export class UserDetail {

}

What that @fromActivate decorator does is simply create or override method activate on the view model to do the assignment. The implementation would look like this:

Here is an example of that https://gist.dumber.app/?gist=3badbdca521ba3aad8109de09a5f11b2&open=src%2Ffrom-activate.js

5

Thanks for your help. I’ll check that.

My original goal went one step further, to separate that routing information completely away from the component, to let the route define the link between route params and component bindables.

1 Like
6

In v1 I think the closest to what you want is to add a pipeline step: https://aurelia.io/docs/routing/configuration#pipelines.

In au2 there’ll be more than one way, but the equivalent to pipelines, routing hooks, will work in a way that’s similar enough.

2 Likes
7

Cool, thank you. This looks very close to what we need! :+1:

1 Like