$router 未绑定在 Angular 1.5 组件中答案

【问题标题】：$router is not bound in Angular 1.5 component$router 未绑定在 Angular 1.5 组件中
【发布时间】：2016-09-12 11:15:43
【问题描述】：

我正在使用 Angular 1.5 组件，并且正在努力让 $router 受框架约束。

基本上我想以编程方式从一个组件导航到另一个组件 - 因此需要使用 $router。

我的 index.html 中只有一个 ng-outlet：

<ng-outlet></ng-outlet>

然后我有这个映射：

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

注意它会调用 Welcome 组件，映射如下：

.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'
});

这就是我尝试绑定 $router 的地方：visitant-header $router="$$router"。

visitant header 组件和控制器定义如下：

.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); }

}]);

调用goTo函数时，抛出如下错误：

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)

即 $router 未绑定。

有什么线索可以解释为什么吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以在其他子组件中执行此操作，但在根组件中不起作用（不知道确切原因）。在控制器中注入 $rootRouter 并尝试 $rootRouter.navigate(['Dest']); 它对我有用。

【讨论】：