在 Typescript(角度）中添加对$state的引用和对$rootScope$stateParams的引用

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

本文关键字：引用 Typescript rootScope stateParams state 添加 角度      更新时间：2023-09-26

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

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

在此链接上，我找到了以下内容，以将对根范围的 $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
}

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

因此，我建议将这个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

我找到了比将其设置为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;
}
相关文章：