How to get route parameters in an expression using AngularDart?

Question

I'm trying to go directly from a URL controlled by a route to an attribute value. What's the most simple way to do this?

I have a route that looks like this:

  ..addRoute(
      name: 'activities',
      path: '/activities',
      enter: view('views/activities.html'),
      mount: (Route route) => route
        ..addRoute(
            name: 'view',
            path: '/:activityId',
            enter: view('views/activity.html')));

I expect the following to work:

/activities /activities/f4f3j4093j4f

The contents of views/activity.html :

<activity-photo activity-id="{{how to get this? I have it in the route}}"></activity-photo>

As you can see, my view is just a custom element with one custom attribute. Can I fill that custom attribute directly from the route param?

Answer 1

For any component/directive/controller inside the view you can ask to inject RouteProvider which has parameters field (Map).

@NgComponent(
    selector: 'activity-photo',
    ...)
class ActivityPhotoComponent {
  ActivityPhotoComponent(RouteProvider routeProvider) {
    String activityId = routeProvider.parameters['activityId'];
    _loadActivity(activityId);
  }
}

This is slightly different from how you specify in your example. The usage here would be:

<activity-photo></activity-photo>

and activity photo would find the activity id on its own.

Alternatively, you could create a controller for the view, but I guess you would need to wrap your template with another tag... Ex:

<div id="activity-view">
  <activity-photo activity-id="ctrl.activityId"></activity-photo>
</div>

.

@NgController(
    selector: '#activity-view',
    publishAs: 'ctrl')
class ActivityViewController {
  String activityId;

  ActivityViewController(RouteProvider routeProvider) {
    String activityId = routeProvider.parameters['activityId'];
  }
}