Angular 1.5 component $router binding

Question

I'm trying to switch a 1.5x project over to components and use the new component-router. I'm having an issue with how to programmatically access the $router in a couple of components that aren't sitting inside of a directive. Basically I have header and sidebar components which need to be able to do $router.navigvate, but using bindings: {$router: "<"} gives me an undefined $router.

I think I might just need to restructure the app a little bit, but I'm not sure how to go about it.

Currently in my Index.html I have ng-app defined on the body, and then the main app module inside of that (<app></app>). My main app component has a template with basically my "masterpage".

So app.html has a <header> component, <sidebar> component, and then <ng-outlet> for the main content. With UI-Router I just used the $state service in the header/sidebar controllers to find the active state or navigate to a new state.

With component-router I can't figure out how to get the $router into the header/sidebar controllers.

Any ideas?

Answer 1

use $rootRouter in the controller

function controller($rootRouter){ $rootRouter.navigate(["someComponent"]) or $rootRouter.navigateByUrl("/url") }