我在将控制器转换为组件以为Angular 2准备应用程序时遇到问题，但是迁移无法顺利进行，我有ui-router在状态之间进行路由并在一些控制器（带有控制器的版本）中使用resolve可以正常工作，但是组件的版本现在可以正常工作了，我遵循了很多指南，似乎我对代码做得很好，但是对我来说不起作用。
我有以下模块与控制器：
(function () {
'use strict';
angular
.module('app.sample', [])
.config(config);
/** @ngInject */
$stateProvider
.state('app.sample', {
url : '/sample',
views : {
'content@app': {
templateUrl: 'app/main/sample/sample.html',
controller : 'SampleController as vm'
}
},
resolve: {
SampleData: function (myService) {
return myService.getSample(); // I return a promise here
}
}
});
}
})();
控制器：
(function ()
{
'use strict';
angular
.module('app.sample')
.controller('SampleController', SampleController);
/** @ngInject */
function SampleController(SampleData)
{
var vm = this;
vm.helloText = SampleData.data.helloText;
}
})();
上面的代码运行良好，但是在将其作为组件之后，它变成了这样：
(function () {
'use strict';
angular
.module('app.sample', [])
.config(config);
/** @ngInject */
function config($stateProvider) {
// State
$stateProvider
.state('app.sample', {
url: '/sample',
views: {
'content@app': {
template: '<sample></sample>'
}
},
resolve: {
SampleData: function (myService) {
return myService.getSample(); // I return a promise here
}
}
});
}
})();
组成部分：
(function () {
'use strict';
angular
.module('app.sample')
.component('sample', {
templateUrl: 'app/main/sample/sample.html',
bindings: {
},
controller: Sample
});
/** @ngInject */
function Sample(SampleData) {
var $ctrl = this;
$ctrl.helloText = SampleData.data.helloText;
}
})();
但现在它无法正常工作，并给我以下错误：
Error: [$injector:unpr] Unknown provider: SampleDataProvider <- SampleData
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=SampleDataProvider%20%3C-%20SampleData
at angular.js:68
at angular.js:4502
at Object.getService [as get] (angular.js:4655)
at angular.js:4507
at getService (angular.js:4655)
at injectionArgs (angular.js:4679)
at Object.invoke (angular.js:4701)
at $controllerInit (angular.js:10234)
at nodeLinkFn (angular.js:9147)
at angular.js:9553
我在bower.json中的依赖项：
"dependencies": {
"angular": "1.5.7",
"angular-animate": "1.5.7",
"angular-aria": "1.5.7",
"angular-cookies": "1.5.7",
"angular-material": "1.1.0-rc.5",
"angular-messages": "1.5.7",
"angular-resource": "1.5.7",
"angular-sanitize": "1.5.7",
"angular-ui-router": "1.0.0-beta.1",
"jquery": "2.2.4",
"mobile-detect": "1.3.2",
"moment": "2.13.0"
}
知道什么问题，我缺少什么吗？
终于解决了，我误解了组件的工作方式。
首先，我的变化SampleData来sampleData，Pascal大小写但第一个字母小。
然后里面module我改变了template对template: '<sample sample-data="$resolve.sampleData"></sample>'
和resolve：
resolve: {
sampleData: function (msApi) {
return msApi.resolve('sample@get');
}
}
因为component我也更改了绑定：
bindings: {
sampleData: '='
},
在的中controller，component我SampleData从签名中删除并这样称呼它$ctrl.helloText = $ctrl.sampleData.data.helloText;。
所以现在的最终代码就像：对于模块：
(function () {
'use strict';
angular
.module('app.sample', [])
.config(config);
/** @ngInject */
function config($stateProvider) {
// State
$stateProvider
.state('app.sample', {
url: '/sample',
views: {
'content@app': {
template: '<sample sample-data="$resolve.sampleData"></sample>'
}
},
resolve: {
sampleData: function (myService) {
return myService.getSample(); // I return a promise here
}
}
});
}
})();
和这样的组件：
(function () {
'use strict';
angular
.module('app.sample')
.component('sample', {
templateUrl: 'app/main/sample/sample.html',
bindings: {
sampleData: '='
},
controller: Sample
});
/** @ngInject */
function Sample() {
var $ctrl = this;
$ctrl.helloText = $ctrl.sampleData.data.helloText;
}
})();
终于工作了。
编辑： PS：在问答范围之外，如果您也使用无状态组件，则需要在控制器内部获取数据而不是解析，因此您可以在任何需要的地方调用组件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句