1
私は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'
});
それ私は$ルーターをバインドしようとするところだ。VIS itant-header $ router = "$$ router"。
visitantヘッダコンポーネントとコントローラは、例えば次のように定義される。GOTO関数が呼び出されると
.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); }
}]);
、次のエラーがスローされます。
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)
すなわち$ルータではなかったですバウンド。
理由は何ですか？