Angular 1.5.3 & Typescript & ngComponentRouter: bindings: { $router:'<'} всегда возвращает неопределенное значение для свойства маршрутизатора
Я пробую компонентный маршрутизатор для Angular 1.5.3 с машинописью и классами для контроллеров компонентов, но мне не удается внедрить текущий маршрутизатор в любой из моих компонентов с привязками:{$router:'<'}. Когда я проверяю $ ctrl для любого компонента в отладчике Chrome, он всегда показывает неопределенный. Сама маршрутизация работает должным образом (показаны компоненты, работает маршрутная ссылка, вызывается $ routerOnActivate). Мне нужен $ router для навигации по коду.
HTML-страница:
<div ng-app="app">
<app></app>
</div>
Код
class AppCtrl {
}
var appComp: ng.IComponentOptions = {
template: `App <ng-outlet></ng-outlet>`,
$routeConfig: [
{ path: '/', name: 'List', component: 'listComp', useAsDefault: true },
{ path: '/new', name:'New', component:'newComp'}
],
bindings: { $router: '<' },
controller:AppCtrl
};
class ListCtrl {
message = '';
$routerOnActivate=() => {
this.message = 'is activated';
}
}
var listComp: ng.IComponentOptions = {
template: `<div><h1>List : {{$ctrl.message}}</h1><a ng-link="['New']">new</a></div>`,
bindings: { $router: '<' },
controller: ListCtrl
};
class NewCtrl {
message = '';
$routerOnActivate = () => {
this.message = 'New is activated';
}
}
var newComp: ng.IComponentOptions = {
template: `<div><h2>New : {{$ctrl.message}}</h2></div>`,
bindings: { $router: '<' },
controller: NewCtrl,
}
angular.module('app', ['ngComponentRouter'])
.value('$routerRootComponent', 'app')
.component('app', appComp)
.component('listComp', listComp)
.component('newComp', newComp)
;
1 ответ
Хорошо, у меня недостаточно репутации, чтобы добавить комментарий, поэтому я должен написать это так. У меня была та же проблема, и я понял, что $router не определен в моем "основном" компоненте приложения.
Поэтому я использовал в компоненте точки входа приложения $rootRouter, а в дочерних компонентах я использовал "this.$ Router". Таким образом, это работает, но я не знаю, является ли это ожидаемым поведением или я делаю что-то не так...
Я пришел к этому решению, когда прочитал в угловой документации следующее ( https://docs.angularjs.org/guide/component-router):
Каждый компонент имеет свой Маршрутизатор. В отличие от Angular 2, мы не можем использовать инжектор зависимостей, чтобы получить доступ к маршрутизатору компонента. Мы можем только внедрить $rootRouter. Вместо этого мы используем тот факт, что директива ng-outlet связывает текущий маршрутизатор с атрибутом $router нашего компонента.
Точка входа в приложение "