Component : ui-router resolve will not inject into controller, data undefined

问题

I have this problem using resolve with component & ui-router, the data "after" resolving promise are "undefined" in a controller

Service:

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

Module/Component/Routing:

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

    });
})

Controller:

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;

After injecting in the controller the object "resolved" by promise after "http" call

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

are undefined!!!

where is the bug.??

thanks a lot...

回答1:

Change the getCollaboratores function to below :

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

Do the same with other one getAccount (i.e inside the success callback return resolve).

This will solve your problem.

Reason is once you chain success callbacks, 1st callback as to return the something which can be the arguments for the 2nd callback. Since the success callback in service was not returning anything(default return value of a function in js is undefined), hence resolved value was not available in the controller.

回答2:

What version of angularjs are you using?

Remember that in 1.6, a then callback now receives 4 parameters: data, status, headers, config and statusText.

In this scenario, a resolve.data could result in an undefined value.

More info on docs: https://docs.angularjs.org/api/ng/service/$http

回答3:

I see that you relate to a component in your state not to a controller, so you should create a component and bind the resolved values to it.

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

And to get the resolve data in your component controller do this:

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

来源：https://stackoverflow.com/questions/42395143/component-ui-router-resolve-will-not-inject-into-controller-data-undefined