javascript - 在 Typescript (angular) 中向 $rootScope 添加对 $state 和 $stateParams 的引用

我正在尝试根据当前状态（在 ui-router 中配置）的数据设置我的 Angular 应用的页面标题。

 <title ng-bind="$state.current.data.pageTitle></title>

在这个链接中，我找到了以下方法，将 $state/$stateParams 添加到根作用域：

.run([ '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }])

我怎样才能把这个翻译成 TypeScript？

 function run($rootScope: ng.IRootScopeService, $state : ng.ui.IState, $stateParams : ng.ui.IStateParamsService) {
    $rootScope.$state // 'state' cannot be resolved
}

答案＃1

更新：此答案的先前版本在 Angular 严格模式或压缩情况下无法正常工作。

因此，我建议在 index.html 中添加这个 ng-strict-di 指令：

<html data-ng-app="App" ng-strict-di> // see ng-strict-di
  <head>

那将表明正确的方法是：

module App
{
    export class RootConfig
    {
        static inject = ['$rootScope', '$state', '$stateParams'];

        constructor(
            $rootScope: any, //ng.IRootScopeService,
            $state: ng.ui.IStateProvider,
            $stateParams: ng.ui.IStateParamsService)
        {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }
    }
}

angular.module('App')
    // wrong - not working in minified world
    // .run(App.RootConfig);
    // correct
    .run(['$rootScope', '$state', '$stateParams', App.RootConfig]);

为什么是这个 $rootScope: any, //ng.IRootScopeService, 而不是这个: $rootScope: ng.IRootScopeService,？为了让生活更轻松……并快速分配未声明的属性 $state 和 $stateParams

答案＃2

我找到了一种比设置为 any 更干净的方式

declare module app {
    interface IScope extends ng.IScope {
        $root:IRootScopeService
    }

    interface IRootScopeService extends ng.IRootScopeService {
        $state:ng.ui.IStateService
    }
}

然后要使用它，只需像这样声明

constructor(
        $rootScope: app.IRootScopeService,
        $state: ng.ui.IStateProvider
{
    $rootScope.$state = $state;
}