代码之家  ›  专栏  ›  技术社区  ›  Andrew Gray

UI路由器解析不使用基于组件的状态

  •  0
  • Andrew Gray  · 技术社区  · 6 年前

    背景:
    在我正在开发的一个应用程序中,我们有一个组件正在两个地方使用。在一个地方,它是从材料设计中调用的 bottomSheet 系统。在另一种情况下,我们直接通过ui路由器状态系统使用组件。

    这是引起麻烦的装置。我已经有了 angular.module 声明中设置了所有正确的包依赖项-我已经和我的团队在这个应用程序上工作了几个月,问题具体是下面的代码,这是我刚刚添加的。

    路线.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);
    }
    

    问题: 每当我试图直接导航到“Awesome Feature”时,不仅我的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 按我记得的那样工作?

    据我所知 决定 对象获取其上的每个命名索引,运行其上的任何函数,然后根据 UI Router Documentation . 很明显我记错了什么或是理解错了什么。

    1 回复  |  直到 6 年前
        1
  •  1
  •   tcrite    6 年前

    仔细看了你的错误之后,我以前碰到过这个问题。试着改变这个

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

    为了这个

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

    正确注入awesomeDefaults。