在 Typescript 中将对 $state 和 $stateParams 的引用添加到 $rootScope (angular)

Question

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

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

在这个 link 上，我发现以下将对 $state/$stateParams 的引用添加到根范围：

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

如何将其翻译成打字稿？

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

Answer 1

更新：此答案的先前版本不适用于 angular 严格模式或缩小。

因此我建议将此 ng-strict-di 指令添加到 index.html:

<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

Answer 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;
}

在 Typescript 中将对 $state 和 $stateParams 的引用添加到 $rootScope (angular)

Add reference to $state and $stateParams to $rootScope in Typescript (angular)

javascript

angularjs

typescript

angular-ui-router