$ router未绑定$ Angular 1.5组件

Question

I'm playing around with Angular 1.5 components and am struggling to get the $router bound by the framework.

Basically I want to navigate from one component to another programatically - hence the need of using the $router.

The only thing I have in my index.html is a ng-outlet:

<ng-outlet></ng-outlet>

Then I have this mapping:

.component('webGuiComponent', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [
    { path: '/welcome/...', name: 'Welcome', component: 'welcomeComponent', useAsDefault: true },
    { path: '/timeline/...', name: 'Timeline', component: 'timelineComponent' }
  ]
})

Notice it will call on the Welcome Component, which is mapped like this:

.component('welcomeComponent', {
  template: '<visitant-header $router="$$router"></visitant-header><div class="container"><ng-outlet></ng-outlet></div>',
  $routeConfig: [
    { path: '/', name: 'Index', component: 'indexComponent', useAsDefault: true },
    { path: '/newUser', name: 'NewUser', component: 'newUser' }
  ]
})

.component('indexComponent', {
  templateUrl: '/app/components/welcome/index.html'
});

That's where I try to bind the $router: visitant-header $router="$$router" .

The visitant header component and controller is defined as such:

.component('visitantHeader', {
  templateUrl: '/app/components/shared/headers/vistantHeader.html',
  bindings: { $router: '<' },
  controller: 'visitantHeaderController'
})

.controller('visitantHeaderController', ["$scope", "$location", function ($scope, $location) {

  var $ctrl = this;

  this.goTo = dest => { this.$router.navigate(dest); }

}]);

When the goTo function is called, the following error is thrown:

angular.js:13550 TypeError: Cannot read property 'navigate' of undefined
    at goTo.dest [as goTo] (visitantHeaderController.js:7)
    at fn (eval at <anonymous> (angular.js:14432), <anonymous>:4:315)
    at b (angular.js:15485)
    at e (angular.js:25018)
    at n.$eval (angular.js:17229)
    at n.$apply (angular.js:17329)
    at HTMLButtonElement.<anonymous> (angular.js:25023)
    at Qf (angular.js:3456)
    at HTMLButtonElement.Pf.d (angular.js:3444)

Ie $router wasn't bound.

Any clue as to why?

Answer 1

You can do this thing in other child components but it would not work inside root component(don't know the exact reason). Inject $rootRouter inside the controller and try $rootRouter.navigate(['Dest']); It worked for me.