背景:
在我正在开发的应用程序上,我们有一个在两个地方使用的组件。在一个地方,它是从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将其解析为路由中事物的控制器。 。很明显,我误会或误解了某些东西。
答案 0 :(得分:1)
仔细查看您的错误后,我曾遇到过此问题。尝试更改此内容
node_modules
对此
resolve: {
awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
}
正确注入awesomeDefaults。