Angular 1.5组件访问ui-router $状态

Question

使用Angular 1.5.x和AngularUI路由器1.0-alpha中引入的新.component()方法，如何从组件内部访问当前路由器状态？

例如（我在这里使用ES2015并按照Todd Motto's Angular Styleguide）：

import angular from 'angular'; 

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

注：标题是一个子组件，UI-路由器被注入并在父组件，被配置。

但$state.current.name甚至简单$state不显示组件的模板中的任何东西。

我想要做的全局想法是根据应用程序的当前状态在头上设置一个类。

我试图在$rootScope上设置状态，但它不起作用...我可能错过了一些东西，因为我对Angular很陌生，所以也许有人有一个想法？

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模板！