question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RouteParams not available to top level directives

See original GitHub issue

I have a primary component named Ticket which has a nested directive of TopNav

part of ticket_client;

@Component(
    selector: 'tickets'
)
@View(
    template: '<topnav></topnav><router-outlet></router-outlet>',
    directives: const [Topnav, RouterOutlet, RouteParams]
)
@RouteConfig(const [
  const Route(path: '/landing', component: Landing, as: 'landing'),
  const Route(path: '/flights', component: ViewFlights, as: 'flights'),
  const Route(path: '/contact', component: Picker, as: 'contact'),
  const Route(path: '/picker/:cityDepart/:cityArrival/:dateDepart/:dateArrival/', component: FlightDisplay, as: 'picker'),
  const Route(path: '/order/:id/:level/:dateDepart/:dateArrival/', component: ViewOrder, as: 'order'),
  const Route(path: '/order/complete', component: ViewComplete, as: 'orderComplete')
])
class Tickets {
  String name = 'Jit Ticket Application';
  Router router;

  Tickets(this.router) {
    router.subscribe( (value) {
      print("Route changed to: $value");
    });
  }
}

It exists outside of the first level router-outlet

If i try an acquire RouteParams through DI inside of TopNav - i get the following error:

Exception: No provider for RouteParams! (Topnav -> RouteParams) ExceptionHandler.call <anonymous closure>
NgZone._onErrorWithoutLongStackTrace@693253716
NgZone.<anonymous closure>

Moving topnav into the child of an outlet seems to solve the issue, but then i have to include topnav in each child view.

I would assume that RouteParams are a top level global object. Might be similar to the comments here on Angular Dart V1

http://japhr.blogspot.com/2013/10/routing-without-scope-in-angulardart.html

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
ericmartinezrcommented, Jan 29, 2016

RouteData and RouteParams are provided by RouterOutlet. The only way to get access them is through routing. If you want them in some non routed component you can use services to pass the data across the app.

1reaction
aarmoracommented, May 26, 2016

@ericmartinezr Nice work! It took me a bit to sort through it (not by any fault of yours) but I think I got it. So the service itself is not getting the route parameters, they are coming from the routable component, to the service, which gives them to the non routable component. Brilliant!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I get $routeParams inside a custom directive
Seems like when the directive is initialized $routeParams is not available. If you use the directive like below as in the plunk it...
Read more >
$routeParams not accessible in controller, when controller not ...
I have a problem with accessing the $routeParams service from a controller. ... Why am I not able to access the route Param...
Read more >
Angular Route Params - TekTutorialsHub
In this tutorial, we learn how to pass route params (Route Parameters) to the Route in Angular. First, let us look at how...
Read more >
How To Get Route Path Parameters In Non-Routed Angular ...
This solution can help us in case when the component in question does NOT represent some part of the base layout. For example,...
Read more >
Common Routing Tasks - Angular
There are three fundamental building blocks to creating a route. Import the AppRoutingModule into AppModule and add it to the imports array. The...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found