我正在尝试用ngRoute组合我的第一个角度组件,到目前为止,我无法获得要解决的数据.
配置：
配置：
.when('/myfirstcomponent',{
template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>',resolve: {
claimKeys: ['$http',function($http) {
$http.get('server/claimkeys.json').then((response) => {
var claimKeys = response.data.DATASET.TABLE;
return claimKeys;
});
}]
}
})
零件：
.component('myfirstcomponent',{
bindings: {
'claimKeys': '@'
},templateUrl: 'components/component.html',controller: [function() {
this.$onInit = function() {
var vm = this;
console.log(vm.claimKeys);
};
}]
组件的html只有一个带有一些随机文本的p元素.
我可以看到调试时我正在检索数据,但我无法在组件控制器上访问它…
编辑：感谢下面接受的答案,我解决了我的问题.它与异步调用的问题没有任何关系,但与我如何定义我的路由和组件有关.请参阅以下代码进行修复.再次感谢.
一些问题：
原文链接：https://www.f2er.com/angularjs/240457.html>正如你所说的声明指令中的键应该是声明键
>它的绑定应该是’<' (单向绑定)或'='(双向绑定),但不是'@',只是传递给指令在引号之间找到的字符串
>在你的指令的控制器var vm = this;应该在上面
$onInit函数而不在其中(范围不同)
> resolve.claimkeys应该返回$http的承诺,而不仅仅是调用
它
> claimKeys应该被路由器的控制器作为注入接收并传递给它的模板
> controllerAs：路由器应该使用’$resolve’
app.component('myfirstcomponent',{
bindings: {
'claimKeys': '='
},template: 'components/component.html',controller: function() {
var vm = this;
this.$onInit = function() {
console.log(vm.claimKeys);
};
}
});
app.config(function ($stateProvider) {
$stateProvider.state('myfirstcomponent',{
url: '/myfirstcomponent',template: '<myfirstcomponent claim-keys="$resolve.claimKeys"></myfirstcomponent>',resolve: {
claimKeys: ['$http',function($http) {
return $http.get('claimkeys.json').then((response) => {
return response.data.DATASET.TABLE;
});
}]
},controller: function (claimKeys) {
this.claimKeys = claimKeys;
},controllerAs: '$resolve'
})
});
plunker：http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview,我在这里使用.state而不是.when用于路由.
