angularjs - UI 路由器解决不适用于基于组件的状态
问题描述
背景:
在我正在开发的应用程序中,我们有一个在两个地方使用的组件。在一个地方,它是从 Material DesignbottomSheet
系统中调用的。在另一种情况下,我们直接通过 ui-router 状态系统使用该组件。
这是引起麻烦的设置。我已经得到了一个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)
}
很棒的功能.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将其解析为路由中事物的控制器。很明显我记错了或误解了某些东西。
解决方案
在更仔细地查看了您的错误之后,我之前遇到过这个问题。尝试改变这个
resolve: {
awesomeDefaults: () => new Controllers.AwesomeDefaults(1, 2, 3)
}
对此
resolve: {
awesomeDefaults: /** ngInject */ () => new Controllers.AwesomeDefaults(1, 2, 3)
}
正确注入 awesomeDefaults。
推荐阅读
- c# - 是否可以展平(隐藏)字典变量名?
- javascript - 添加表单元素不会更新输入中的默认文本
- dart - 在 dart 的依赖版本控制中加一 (+1) 是什么意思
- ios - IOS : Tabbar item 一次又一次点击是双Tab bar button item size
- sql-server - 如何在 T-SQL 中处理大 XML 文件并从中选择数据
- scala - 将相似类型的多条记录翻译成单行
- android - 使用约束布局时视图组的背景
- sql - 为什么执行此查询时会出现此错误?
- mysql - 我可以将变量与某个函数的值一起使用吗
- ios - 如何在 swift4 中获得蓝牙外设的特征值?