Question

我想转换具有多个状态的Angular ui-router配置文件并解析为Typescript。

只要我不使用$ stateParams，一切正常，当我这样做时，我会收到Unknown provider错误。我在$stateParams，$inject，constructor以及.config()函数中包含resolve依赖项，如下所示：

interface IMyStateParams extends ng.ui.IStateParamsService {
    parentObjectId: Guid;
}

export class listConfig {
    $inject = ['$stateProvider', '$urlRouterProvider', '$stateParams', '$qmcPath'];

    constructor(private $stateProvider: ng.ui.IStateProvider, private $urlRouterProvider: ng.ui.IUrlRouterProvider, private $stateParams: IMyStateParams, private $qmcPath: string) {
        this.init();
    }

    private init(): void {
        this.$stateProvider
            .state('client', {
                url: '/client/:parentObjectId',
                views: {
                    'main': {
                        templateUrl: 'MainDetail/',
                        controller: 'ClientDetailController',
                        controllerAs: 'detailCtrl'
                    }
                },
                resolve: {
                    clientDetailService: 'clientDetailService',
                    client: (clientDetailService, $stateParams) => {
                        return clientDetailService.getClientDetail(this.$stateParams.parentObjectId)
                            .then(function (data) {
                                return data;
                            });
                    },
                    clientWVs: function (clientDetailService) {
                        return clientDetailService.getClientDetailWVs()
                            .then(function (result) {
                                return result;
                            });
                    }
                }
            });
        }
    }
}

(() => {
    angular
        .module('QMC.Klient.List')
        .config(['$stateProvider', '$urlRouterProvider', '$stateParams', '$qmcPath', // more dependencies
            ($stateProvider, $urlRouterProvider, $stateParams, $qmcPath) => {
                return new QMC.Klient.List.listConfig($stateProvider, $urlRouterProvider, $stateParams, $qmcPath);
            }
        ]);
})();

包含这样的依赖的正确方法是什么？

聚苯乙烯。我也尝试了this.$stateParams，结果相同。

Answer 1

尝试删除$ stateParams的所有依赖项，并仅在resolve-function

中保留参数

Answer 2

不确定您的问题究竟是什么，因为我可以看到这看起来有效。唯一的问题是类将$ inject定义为对象的属性，但是在构造类之前不会设置。

// Correct
function MyObj(a, b, c) {}
MyObj.$inject = ['a', 'b', 'c'];

// Incorrect
function MyObj(a, b, c) {
  this.$inject = ['a', 'b', 'c'];
}

您可以通过多种方式解决此问题。我建议使用装饰器。主要是因为它很棒。

@injectable
export class listConfig {
    constructor(private $stateProvider, private $urlRouterProvider, private $stateParams, private $qmcPath: string) {}
}

function injectable(target) {
    var fnStr = target.toString().replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg, '');
    var result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(/([^\s,]+)/g);
    if(result === null) {
        result = [];
    }

    target.$inject = result; 
}

未知的提供者：$ stateParams在Typescript中使用ui-router的解析时

2 个答案: