组件：ui-router 解析不会注入控制器，数据未定义答案

【问题标题】：Component : ui-router resolve will not inject into controller, data undefined组件：ui-router 解析不会注入控制器，数据未定义
【发布时间】：2017-07-12 17:13:57
【问题描述】：

我在使用组件和 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”调用后被promise“解析”

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

未定义！！！

错误在哪里。？？

非常感谢...

【问题讨论】：

console.log('Success',resolve.data); 的输出是什么？
输出正确：成功对象 {data: Array[1]}.... 没有 RESOLVE 所有代码都可以正常工作，我尝试在 promise resolve 后使用 resolve 渲染视图。

标签： javascript angularjs angular-promise

【解决方案1】：

将 getCollaboratores 函数更改为以下：

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

对另一个 getAccount 执行相同的操作（即在成功回调返回解析中）。

这将解决您的问题。

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

【讨论】：

回调不是not returning anything。 return undefined 添加到 js 函数如果没有覆盖 return 指令。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 了解有关 .then() 的详细信息。 resolve 到底是什么？来源557: @return {object} Promise for an object that contains the resolved return value of all invocables, as well as any inherited and local values。这意味着您的决议实际上是Promise(() => return Promise.all(resolve.keys))。他们中的大多数人都返回undefined。
对不起，我不明白你的反馈，你能正确缩进答案吗？谢谢。
我也更喜欢这个。
@SimoneLazzaroni 您能否为您的代码设置一个小提琴或 plunkr 进行测试。上述解决方案对我来说效果很好

【解决方案2】：

你用的是什么版本的angularjs？

请记住，在 1.6 中，then 回调现在接收 4 个参数：data、status、headers、config 和 statusText。

在这种情况下，resolve.data 可能会导致 undefined 值。

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

【讨论】：

嗨@AlexSu 我使用Angular 1.5.9

【解决方案3】：

我看到您与状态中的组件相关，而不是与控制器相关，因此您应该创建一个组件并将解析的值绑定到它。

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);
}

【讨论】：