Угловой 1,5-компонентный доступ ui-router $ state

Question

Использование нового метода .component(), введенного в Angular 1.5.x и AngularUI Router 1.0-alpha, как я могу получить доступ к текущему состоянию маршрутизатора изнутри компонента?

Например (я использую ES2015 здесь и следовать Todd Motto's Angular Styleguide):

import angular from 'angular'; 

const header = angular 
    .module('header', []) 
    .component('header', { 
     template: ` 
      <p>{{$state.current.name}}</p> 
     ` 
    }); 

Примечание: заголовок является дочерним компонентом, щ-маршрутизатор впрыскивается и настроен в качестве родительского компонента.

Но $state.current.name или даже просто $state ничего не отображает в шаблоне компонента.

Глобальная идея того, что я пытаюсь сделать, это установить класс в заголовке в зависимости от текущего состояния приложения.

Я попытался установить состояние на $rootScope, но он тоже не работает ... Я, вероятно, что-то пропустил, так как я совершенно новый для Углового, так что, может быть, у кого-то есть идея?

Answer 1

Вы впрыскивать его в контроллер:

import angular from 'angular'; 

const header = angular 
    .module('header', []) 
    .component('header', { 
     template: ` 
      <p>{{$ctrl.$state.current.name}}</p> 
     `, 
     controller: ['$state', function($state) { 
      this.$state = $state; 
     }] 
    }); 

Обратите внимание$ctrl в шаблоне!