组件:ui-router resolve不会注入控制器,数据未定义

时间:2017-02-22 15:05:26

标签: javascript angularjs angular-promise

我有使用resolve with component& amp; ui-router,数据"之后"解决承诺是"未定义"在控制器中

服务

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"致电

 this.userdata = userdata;
 this.accdata = accdata;

未定义!!!

错误在哪里。??

非常感谢...

3 个答案:

答案 0 :(得分:6)

将getCollaboratores函数更改为:

getCollaboratores () {
  return this.$http.get(this.API_URL + '/collaboratores').then( 
      (resolve) => {   // promise resolve
      console.log('Success',resolve.data);
      return resolve;
   });
}

对其他一个getAccount做同样的事情(即在成功回调返回解析中)。

这将解决您的问题。

原因是,一旦你链接成功回调,第一次回调就会返回可以作为第二次回调的参数的东西。由于服务中的成功回调没有返回任何内容(js中函数的默认返回值未定义),因此控制器中没有可用的解析值。

答案 1 :(得分:0)

您使用的是什么版本的angularjs?

请记住,在1.6中,then回调现在会收到4个参数:datastatusheadersconfigstatusText

在这种情况下,resolve.data可能会产生undefined值。

有关文档的更多信息:https://docs.angularjs.org/api/ng/service/ $ http

答案 2 :(得分:0)

我发现你与你所在州的一个组件有关,而不是一个控制器,所以你应该创建一个组件并将已解析的值绑定到它。

angular
    .module('app')
    .component('core', {
        templateUrl: 'app/app.html',
        controller: CoreController,
        controllerAs: 'vm',
        bindings: {
          userdata: '<',
          accdata: '<'
        }
    });

要获得组件控制器中的解析数据,请执行以下操作:

const vm = this;
vm.$onInit = () => {
    console.log('userdata: ', vm.userdata);
    console.log('accdata: ', vm.accdata);
}