Question

我正在使用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，它的映射如下：

.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 =＆＃34; $$路由器＆＃34; 。

访问者标题组件和控制器定义如下：

.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没有绑定。

为什么有任何线索？

Answer 1

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

$ router未绑定$ Angular 1.5组件

1 个答案: