각도 1.5 구성 요소 액세스 ui-router $ 상태

Question

Angular 1.5.x 및 AngularUI Router 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에 상태를 설정하려고 시도했지만 작동하지 않습니다 ... 제가 앵귤러에 익숙하지 않아서 뭔가 빠졌을 것입니다. 그래서 누군가가 아이디어를 가지고있을 수 있습니까?

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주의 마세요!