$路由器沒有綁定在Angular 1.5組件

我正在玩Angular 1.5組件，並且正在努力獲得框架綁定的$路由器。

基本上我想從一個組件導航到另一個組件，因此需要使用$路由器。

我有我的index.html的唯一事情是一個NG出口：

<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' } 
    ] 
})

注意，它會調用在歡迎組件，其映射這樣的：

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

這就是我嘗試在$路由器綁定：可見itant-header $ router =「$$ router」。

的貴賓標題組件和控制器被定義爲這樣：

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

即$路由器不界。

任何線索爲什麼？

來源

2016-05-16 cldjr

你可以在其他子組件中做這件事，但它不會在根組件內工作（不知道確切的原因）。注入$ rootRouter在控制器內，並嘗試$ rootRouter.navigate（['Dest']）;它爲我工作。

來源

2016-08-27 19:01:40

$路由器沒有綁定在Angular 1.5組件

回答

相關問題