Question

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

 <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

更新：此答案的上一版本不适用于角度严格模式或缩小。

因此我建议将此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）

2 个答案: