组件:ui-router 解析不会注入控制器，数据未定义 [英] Component : ui-router resolve will not inject into controller, data undefined

问题描述

我在使用 resolve with component & 时遇到了这个问题ui-router，数据后"解决承诺在控制器中未定义"

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

服务:

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解析"的对象

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

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

未定义！！！

错误在哪里.??

非常感谢...

推荐答案

将 getCollaboratores 函数更改为以下:

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

对另一个 getAccount 执行相同的操作(即在成功回调返回解析中).

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

这将解决您的问题.

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

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.

这篇关于组件:ui-router 解析不会注入控制器，数据未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！