UI 路由器解决不适用于基于组件的状态答案

【问题标题】：UI Router resolve not working with component-based statesUI 路由器解决不适用于基于组件的状态
【发布时间】：2018-08-09 08:58:57
【问题描述】：

背景：
在我正在开发的应用程序中，我们有一个在两个地方使用的组件。在一个地方，它是从 Material Design bottomSheet 系统调用的。在另一个方面，我们直接通过 ui-router 状态系统使用该组件。

这是导致问题的设置。我已经有一个 angular.module 声明，其中设置了所有正确的包依赖项 - 我和我的团队已经在这个应用程序上工作了几个月，问题特别是下面的代码，这是我刚刚添加的.

routes.ts

namespace Main {
    RouteConfig.$inject = ['$stateProvider'];

    function RouteConfig($stateProvider) {
        $stateProvider
            .state('main.myAwesomeFeature', {
                url: '^/myawesomefeature',
                component: 'awesomefeature',
                resolve: {
                    awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
                }
            });

        // Other routing minutiae, unimportant to the question
    }

    angular.module('app').config(RouteConfig)
}

awesomefeature.ts

namespace Controllers {
    export class AwesomeDefaults {
        public constructor(
            number1: number,
            number2: number,
            number3: number
        ) {
        }
    }

    export class AwesomeFeatureCtrl {
        public static $inject: string[] = [
            'awesomeDefaults'
        ];
        public controller(
            public awesomeDefaults: AwesomeDefaults
        ) {               
        }

        // ...Other methods and irrelevant stuff...
    }

    angular
        .module('app')
        .controller('awesomeFeatureCtrl', AwesomeFeatureCtrl);
}

namespace Components {
    export var awesomeFeatureCmpt: ng.IComponentOptions = {
        bindings: {},
        controller: 'awesomeFeatureCtrl',
        controllerAs: '$ctrl',
        templateUrl: '(Irrelevant, as is the HTML)'
    };

    angular
        .module('app')
        .component('awesomefeature', awesomeFeatureCmpt);
}

问题： 每当我尝试直接导航到“真棒功能”时，不仅我的 HTML 没有呈现，而且我收到以下控制台错误：

angular.js:14525 Error: [$injector:unpr] Unknown provider: awesomeDefaultsProvider <- awesomeDefaults <- awesomeFeatureCtrl  
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=awesomeDefaultsProvider%20%3C-%20awesomeDefaults%20%3C-%20awesomeFeatureCtrl  
    at angular.js:66  
    at angular.js:4789  
    at Object.getService [as get] (angular.js:4944)  
    at angular.js:4794  
    at getService (angular.js:4944)  
    at injectionArgs (angular.js:4969)  
    at Object.invoke (angular.js:4995)  
    at $controllerInit (angular.js:10866)  
    at nodeLinkFn (angular.js:9746)  
    at angular.js:10154

无论出于何种原因，$stateProvider.state({resolve}) 似乎都没有正确解析我的awesomeDefaults 并将值注入awesomeFeatureCtrl。

问题：
为什么resolve 没有像我记得的那样工作？

据我了解，resolve 对象获取其上的每个命名索引，运行其上的任何函数，然后根据UI Router Documentation 将其解析到路由中事物的控制器中。很明显我记错了或理解错了。

【问题讨论】：

我相信您需要将 awesomeDefaults 添加到您的组件绑定中。
很好的建议，但没有效果 - 这只会继续生成 Unknown Provider 错误。

标签： angularjs typescript dependency-resolver

【解决方案1】：

在仔细查看了您的错误之后，我之前遇到过这个问题。尝试更改此设置

resolve: {
                awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
            }

到这里

resolve: {
                awesomeDefaults: /** ngInject */ () => new Controllers.AwesomeDefaults(1, 2, 3)
            }

正确注入 awesomeDefaults。

【讨论】：