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>
        `
    });

注意：header是子组件，ui-router在父组件中注入并配置。

但是$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！

Angular 1.5组件访问ui-router $ state

1 个答案: