javascript 路由器中的Angular 多分辨

8tntrjer  于 2023-01-29  发布在  Java
关注(0)|答案(2)|浏览(113)

我尝试解析多个服务到我的控制器,第二个服务依赖于第一个解析第一,因为它需要一些数据,以包括作出请求。
下面是我想做的事情,以及我认为它应该如何工作,但是,我似乎无法访问第一个resolveData请求中返回的数据。
如有任何建议或想法,我们将不胜感激

.when('/maps/:id', {
    templateUrl: 'partials/maps/view',
    controller: 'MapViewCtrl',
    authenticate: true,
    resolve: {
        resolveData: function ($route, MapService) {
            var data = MapService.showfull({id: $route.current.params.id});
            return data.$promise;
        },
        resolveMoreData: function($route, Service, resolveData){
            var returnData = Service.get({id: resolveData.id});
            return returnData.$promise;
        }
    }
  })
czfnxgou

czfnxgou1#

在路由定义中解析的值不能相互依赖。它们旨在由该路由的控制器使用。
有关参考,请参见$routeProvider源代码的以下部分:

function updateRoute() {
  // ...
  var locals = angular.extend({}, next.resolve);

  angular.forEach(locals, function(value, key) {
    locals[key] = angular.isString(value) ?
      $injector.get(value) : $injector.invoke(value, null, null, key);
  });

  // ...

  // Here, we use $q.all(), which converts array of the promises
  // into a single promise. That input array contains independent
  // promises.
  return $q.all(locals);
}

您可以通过以下两种方式解决此问题:

  • resolveMoreData逻辑移入控制器
  • 创建一个依赖项(作为已解析的依赖项或服务),将这两个承诺合二为一。

第二个选项可能如下所示:

resolve: {
  data: function ($route, MapService, Service) {
    var deferred = $q.defer();

    MapService
      .showfull({id: $route.current.params.id})
      .then(function success(data) {
              return Service.get({id: data.id});
            }, function error(reason) {
              deferred.reject(reason);
            })
       .then(function success(data) {
              deferred.resolve(data);
            }, function error(reason) {
              deferred.reject(reason);
            });

    return deferred.promise;
  }
}

(note上面的代码只是一个例子,我还没有运行它)。

zpgglvta

zpgglvta2#

应该在方括号[]中或使用注解注入依赖项

/* @ngInject */
.when('/maps/:id', {
    templateUrl: 'partials/maps/view',
    controller: 'MapViewCtrl',
    authenticate: true,
    resolve: {
        resolveData: function ($route, MapService) {
            var data = MapService.showfull({id: $route.current.params.id});
            return data.$promise;
        },
        resolveMoreData: ['$route', 'Service','resolveData', function($route, Service, resolveData){
            var returnData = Service.get({id: resolveData.id});
            return returnData.$promise;
        }]
    }
  })

相关问题