Angular-ui-router 打字稿定义 [英] Angular-ui-router typescript definitions

问题描述

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

When we updated our app to use angular-ui-router v1.0.3 we got some problems with the typescript definitions. Since we were using the $stateChangeSuccess event the migration guide told us that we now should use the TransitionService.onSuccess

当一切都编译成 js 时它工作正常，但问题是 Typescript 定义文件中不存在 TransitionService(使用 npm/@types 下载)给我们构建时带来麻烦.

When everything is compiled to js it works fine, but the problem is that TransitionService do not exist in the Typescript definition file (downloaded using npm/@types) giving us trouble when building.

https://github.com/DefinitelyTyped/DefinitelyTyped/树/主/类型/angular-ui-router

通过查看 node_modules 文件夹中的 ui-router 源文件夹，我可以看到该源已经存在打字稿定义文件.

By looking in the ui-router source folder within the node_modules folder I can see that there already exist typescript definition files for the source.

1. 那么@types/angular-ui-router 的打字稿定义是否缺少 TransitionService?
2. 或者我应该使用随源提供的定义文件吗?(如果是，怎么做?)
3. 其他方式?

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

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

推荐答案

我已找到解决您问题的方法."$transitions" 具有 TransitionService 类型.

I have found the solution on your issue. "$transitions" has type of TransitionService.

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

You can import TransitionService from '@uirouter/angularjs' in any .ts file of your application. Then just please use dependency injection of angularjs.

router.ts 文件:

router.ts file:

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"导入.

Please also bear in the mind that other services described on the following page: https://ui-router.github.io/ng1/docs/latest/modules/injectables.html are injectable in the same manner: importing from '@uirouter/angularjs'.

示例:

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

这篇关于Angular-ui-router 打字稿定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！