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 нашего компонента.

Точка входа в приложение "" не находится внутри ng-розетки, так что, возможно, это как-то связано с этим

Другие вопросы по тегам