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