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定义文件(使用npm/@ types下载)中不存在TransitionService，在构建时会给我们带来麻烦.

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/树/主/类型/用户界面路由器

通过查看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])

还请记住，以下页面上描述了其他服务:

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屋！