Javascript 组件:ui路由器解析将不会注入控制器,数据未定义
我在使用组件和ui路由器解析时遇到了这个问题,解析承诺之后的数据在控制器中是“未定义”的 服务:Javascript 组件:ui路由器解析将不会注入控制器,数据未定义,javascript,angularjs,angular-promise,Javascript,Angularjs,Angular Promise,我在使用组件和ui路由器解析时遇到了这个问题,解析承诺之后的数据在控制器中是“未定义”的 服务: class userService { constructor ($http, ConfigService, authService) { this.$http = $http; this.API_URL = `${ConfigService.apiBase}`; this.authService = authService; } testAuth () {
class userService {
constructor ($http, ConfigService, authService) {
this.$http = $http;
this.API_URL = `${ConfigService.apiBase}`;
this.authService = authService;
}
testAuth () {
return this.$http.get(this.API_URL + '/test-auth')
}
getCollaboratores () {
return this.$http.get(this.API_URL + '/collaboratores').then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
getAccount () {
var config = {
headers: { "X-Shark-CollaboratoreId" : "1"}
};
return this.$http.get(this.API_URL + '/accounts' + '/' + 1, config).then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
.config(($stateProvider, $urlRouterProvider) => {
"ngInject";
$urlRouterProvider.otherwise('/');
$stateProvider
.state('core', {
redirectTo: 'dashboard',
url: '/core',
component: 'core',
resolve: {
userdata: (userService) => {
return userService.getCollaboratores();
},
accdata: (userService) => {
return userService.getAccount();
}
}
});
})
let self;
class CoreController {
constructor($state,userService,authService,userdata,accdata) {
this.name = 'core';
this.$state = $state;
this.userService = userService;
this.authService = authService;
this.userdata = userdata;
this.accdata = accdata;
console.log('name',this.name);
self = this;
console.log('userdata',self);
}
}
CoreController.$inject = ['$state','userService', 'authService','userdata','accdata'];
export default CoreController;
模块/组件/布线:
class userService {
constructor ($http, ConfigService, authService) {
this.$http = $http;
this.API_URL = `${ConfigService.apiBase}`;
this.authService = authService;
}
testAuth () {
return this.$http.get(this.API_URL + '/test-auth')
}
getCollaboratores () {
return this.$http.get(this.API_URL + '/collaboratores').then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
getAccount () {
var config = {
headers: { "X-Shark-CollaboratoreId" : "1"}
};
return this.$http.get(this.API_URL + '/accounts' + '/' + 1, config).then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
.config(($stateProvider, $urlRouterProvider) => {
"ngInject";
$urlRouterProvider.otherwise('/');
$stateProvider
.state('core', {
redirectTo: 'dashboard',
url: '/core',
component: 'core',
resolve: {
userdata: (userService) => {
return userService.getCollaboratores();
},
accdata: (userService) => {
return userService.getAccount();
}
}
});
})
let self;
class CoreController {
constructor($state,userService,authService,userdata,accdata) {
this.name = 'core';
this.$state = $state;
this.userService = userService;
this.authService = authService;
this.userdata = userdata;
this.accdata = accdata;
console.log('name',this.name);
self = this;
console.log('userdata',self);
}
}
CoreController.$inject = ['$state','userService', 'authService','userdata','accdata'];
export default CoreController;
控制器:
class userService {
constructor ($http, ConfigService, authService) {
this.$http = $http;
this.API_URL = `${ConfigService.apiBase}`;
this.authService = authService;
}
testAuth () {
return this.$http.get(this.API_URL + '/test-auth')
}
getCollaboratores () {
return this.$http.get(this.API_URL + '/collaboratores').then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
getAccount () {
var config = {
headers: { "X-Shark-CollaboratoreId" : "1"}
};
return this.$http.get(this.API_URL + '/accounts' + '/' + 1, config).then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
}
)
}
.config(($stateProvider, $urlRouterProvider) => {
"ngInject";
$urlRouterProvider.otherwise('/');
$stateProvider
.state('core', {
redirectTo: 'dashboard',
url: '/core',
component: 'core',
resolve: {
userdata: (userService) => {
return userService.getCollaboratores();
},
accdata: (userService) => {
return userService.getAccount();
}
}
});
})
let self;
class CoreController {
constructor($state,userService,authService,userdata,accdata) {
this.name = 'core';
this.$state = $state;
this.userService = userService;
this.authService = authService;
this.userdata = userdata;
this.accdata = accdata;
console.log('name',this.name);
self = this;
console.log('userdata',self);
}
}
CoreController.$inject = ['$state','userService', 'authService','userdata','accdata'];
export default CoreController;
在控制器中注入对象后,对象在“http”调用后通过承诺“解析”
没有定义
臭虫在哪里
非常感谢…将getCollaboratores函数更改为以下内容:
getCollaboratores () {
return this.$http.get(this.API_URL + '/collaboratores').then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
return resolve;
});
}
对另一个getAccount执行相同的操作(即在成功回调返回解析中)
这会解决你的问题
原因是一旦您链接成功回调,第一次回调将返回可以作为第二次回调参数的某物。由于服务中的成功回调没有返回任何内容(js中函数的默认返回值未定义),因此解析值在控制器中不可用。将getCollaboratores函数更改为以下值:
getCollaboratores () {
return this.$http.get(this.API_URL + '/collaboratores').then(
(resolve) => { // promise resolve
console.log('Success',resolve.data);
return resolve;
});
}
对另一个getAccount执行相同的操作(即在成功回调返回解析中)
这会解决你的问题
原因是一旦您链接成功回调,第一次回调将返回可以作为第二次回调参数的某物。由于服务中的成功回调没有返回任何内容(js中函数的默认返回值未定义),因此解析值在控制器中不可用。您使用的是什么版本的angularjs 请记住,在1.6中,
然后
回调现在接收4个参数:数据
,状态
,标题
,配置
和状态文本
在这种情况下,resolve.data
可能导致未定义的值
关于文档的更多信息:$http您使用的是什么版本的angularjs
请记住,在1.6中,然后
回调现在接收4个参数:数据
,状态
,标题
,配置
和状态文本
在这种情况下,resolve.data
可能导致未定义的值
有关文档的更多信息:$http我发现您与处于您的状态的组件相关,而不是与控制器相关,因此您应该创建一个组件并将解析的值绑定到它
angular
.module('app')
.component('core', {
templateUrl: 'app/app.html',
controller: CoreController,
controllerAs: 'vm',
bindings: {
userdata: '<',
accdata: '<'
}
});
我发现您与处于您的状态的组件相关,而不是与控制器相关,因此您应该创建一个组件并将解析的值绑定到它
angular
.module('app')
.component('core', {
templateUrl: 'app/app.html',
controller: CoreController,
controllerAs: 'vm',
bindings: {
userdata: '<',
accdata: '<'
}
});
console.log('Success',resolve.data)的输出是什么代码>?输出正确:成功对象{data:Array[1]}。。。。如果RESOLVE所有代码都不能正常工作,我尝试在promise RESOLVE之后使用RESOLVE来呈现视图。console.log('Success',RESOLVE.data')的输出是什么代码>?输出正确:成功对象{data:Array[1]}。。。。如果RESOLVE所有代码都不能正常工作,我尝试在promise RESOLVE之后使用RESOLVE渲染视图。回调不不返回任何内容<代码>返回未定义
添加到js函数,如果没有任何内容覆盖返回
指令。有关.then()
的详细信息。什么是真正的解析
?。来自sources557:@return{object}表示包含所有invocables的解析返回值以及任何继承值和本地值的对象。这意味着您的解析实际上是一个承诺(()=>返回Promise.all(resolve.keys))
。他们大多数返回未定义的
。对不起,我不理解你的反馈,你能正确缩进答案吗。谢谢。我也希望这样。@SimoneLazzaroni您能为您的代码设置一个提琴或plunkr进行测试吗。上述解决方案对于meCallback not不返回任何内容非常有效<代码>返回未定义
添加到js函数,如果没有任何内容覆盖返回
指令。有关.then()
的详细信息。什么是真正的解析
?。来自sources557:@return{object}表示包含所有invocables的解析返回值以及任何继承值和本地值的对象。这意味着您的解析实际上是一个承诺(()=>返回Promise.all(resolve.keys))
。他们大多数返回未定义的
。对不起,我不理解你的反馈,你能正确缩进答案吗。谢谢。我也希望这样。@SimoneLazzaroni您能为您的代码设置一个提琴或plunkr进行测试吗。上述溶液适用于meHi@Alexase i使用Angular 1.5.9Hi@Alexase i使用Angular 1.5.9