CODEWITHSUNDEEP
angulardartangular-dart
Paul Carlton
Paul Carlton

Reputation: 2993

Dart Angular Route Parameters not working

I'm trying to get AngularDart routing to work properly and it's giving me a headache. I'm trying to get the query parameter of a child route and it's not working in my component when extending OnActivate like the tutorial here says. It recognizes the page but it doesn't give me the parameter in the RouterState. I don't know why. I get no errors and I get no warnings or anything. I can bypass it using Uri class for now to test other things and to keep my momentum but I would prefer to have it working as expected.

This is the structure:

Top
 - /routes.dart
 - /route_paths.dart
 - /resources_list_component.dart
 - /resources
   - ./resources_routes.dart
   - ./resources_route_paths.dart
   - ./my_resource_component.dart
   - ./my_resource_component.html

In /route_paths.dart I have

static final resources = RoutePath(path: 'resources');

Which is then used in /routes.dart:

static final resources = RouteDefinition(
  routePath: RoutePaths.resouces
  component: resource_list_template.ResourceListComponentNgFactory
);

I then use this route as the parent router in my resources route paths file:

static final resource = RoutePath(
  path: 'resource/:id',
  parent: _parent.RoutePaths.resources
);

In the above snippet, you can see that I'm expecting RouterState to have the query parameter id as is suggested in AngularDart's documentation. This allows me to do something like this: http://localhost/#/resources/resource/1

This router path is then used in resources/resources_routes.dart:

    static final resource = RouteDefinition(
        routePath: ResourcesRoutePaths.resource,
        component: my_resource_template.MyResourceComponentNgFactory,
    );

    static final all = <RouterDefinition>[ resource ];

All this works, almost. When I go to the url /resources/resource/1, i indeed see the correct HTML output from my_resource_component.html so I know that Angular Routing is working up to that point. The kicker is in trying to get /1 to be query parameter with the name "id".

In the documentation for it says I need to extend the component with OnActivate which is specific to the lifecycle of the app. So I do this and add the following method to the controller:

@Component(...)
class MyResourceComponent extends OnActivate {
    ...
    @override
    OnActivate (RouterState _, RouterState current) {
       Console().log(current.queryParameters.isEmpty);
    }
}

The above code outputs true. As in the queryParameters are empty. I have followed the guides and at this point I don't know what I'm missing. Does someone know why this could happen, or if there's a glaring step I'm missing??

Upvotes: 1

Views: 354

Answers (1)

Brian Gorman
Brian Gorman

Reputation: 824

The problem is you are trying to access queryParameters instead of parameters.

Console().log(current.queryParameters.isEmpty);

vs

Console().log(current.parameters.isEmpty);

https://angulardart.dev/api/angular_router/angular_router/RouterState/parameters

The parameters map returns the URL parameters whereas the queryParameters map returns the query parameters. For instance, given the url:

/resources/resource/1?hey=dude

"1" is a url parameter where "hey" is a query parameter.

Upvotes: 1

Related Questions