Angular-ui-router 打字稿定义

Posted 2023-03-13

【中文标题】Angular-ui-router 打字稿定义

【英文标题】：Angular-ui-router typescript definitions

【发布时间】：2017-10-23 07:24:18

【问题描述】：

当我们更新我们的应用程序以使用 angular-ui-router v1.0.3 时，我们在 typescript 定义方面遇到了一些问题。 由于我们使用 $stateChangeSuccess 事件，迁移指南告诉我们现在应该使用 TransitionService.onSuccess

当所有东西都编译为 js 时，它工作正常，但问题是 Typescript 定义文件（使用 npm/@types 下载）中不存在 TransitionService，这给我们构建时带来了麻烦。

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/angular-ui-router

通过查看 node_modules 文件夹中的 ui-router 源文件夹，我可以看到源已经存在 typescript 定义文件。

@types/angular-ui-router 的 typescript 定义是否缺少 TransitionService？ 或者我应该使用源提供的定义文件吗？ （如果有，怎么做？） 其他方式？

angular-ui-router api TransitionService: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html.

【问题讨论】：

有同样的问题。我认为@types 一个已经过时了。我们使用的是全局上下文，而不是模块，所以不确定如何在不导入 @uirouter/angularjs 的定义的情况下使用它。因为它似乎没有声明环境模块。

【参考方案1】：

我已经找到了您的问题的解决方案。 "$transitions" 具有 TransitionService 类型。

您可以在应用程序的任何 .ts 文件中从“@uirouter/angularjs”导入 TransitionService。那么请使用angularjs的依赖注入。

router.ts 文件：

import  TransitionService  from '@uirouter/angularjs';

export class AppRouter 

    static inject = ['$rootScope', '$state', '$stateParams', '$transitions'];

    constructor(
        $rootScope: any,
        $state: ng.ui.IStateProvider,
        $stateParams: ng.ui.IStateParamsService,
        $transitions: TransitionService
    )
    
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    

app.ts:

angular
// main module initialization and injecting third party modules
.module(app, [
    'schemaForm', 'ui.router', 'base64', 'ng', 'ngMessages', 'angularMoment'
])
// angularjs configs
.config(routesConfig)
.run(['$rootScope', '$state', '$stateParams', '$transitions', AppRouter])

还请注意以下页面中描述的其他服务：https://ui-router.github.io/ng1/docs/latest/modules/injectables.html 以相同的方式注入：从“@uirouter/angularjs”导入。

例子：

 import 
     StateService, TransitionService, Transition, UrlRouter, UrlMatcherFactory,
     StateParams, StateRegistry, UIRouterGlobals, UIRouter, Trace, UrlService
  from "@uirouter/core";

【讨论】：

这使用模块。我相信 OP 正在使用环境声明构建他的应用程序。

我可以像你展示的那样导入 TransitionService。所以它解决了我的问题。谢谢。但正如@mrahhal 所说，使用环境声明时仍然存在问题。