如何在 resolve 中使用 $routeParams

Question

我现在这样使用$routeParams：

我的工厂函数：

angular.module('fifaApp')
  .factory('FifaService', ['$http',
    function($http) {
      var sdo = {
        getTeamDetails: function(code) {
          var promise = $http.get('api/team/' + code);
          promise.success(function(data, status, headers, conf) {
            return data;
          });
          return promise;
        }
      }
      return sdo;
    }
  ]);

控制器函数：

.controller('TeamDetailsCtrl',
  ['FifaService','testt',
    function(FifaService,testt) {
      var self = this;
      self.team = testt.data;
    }
]);

配置：

angular.module('fifaApp', ['ngRoute'])
.config(function($routeProvider) {
.when('/login', {
      templateUrl: 'views/login.html'
    })
.when('/team/:code', {
      templateUrl: 'views/team_details.html',
      controller:'TeamDetailsCtrl as teamDetailsCtrl',
      resolve: {
          testt: ['$routeParams','UserService',
          function($routeParams, UserService) {
          return FifaService.getTeamDetails($routeParams.code);
      }]
  }
});
$routeProvider.otherwise({
      redirectTo: '/'
 });
});

但是views/team_details.html没有显示。有任何想法吗？最好的问候

Answer 1

回调函数无法 return 数据。你的 'getTeamDeatails' 方法应该 return 一个承诺而不是使用回调，因为你需要 return '$http.get ' 已经 returning 承诺对象。

 getTeamDeatails: function() {
      var promise = $http.get('api/team');
      promise.then(function(resp){
        return resp.data;
      });
      return promise;
 }

在 resolve 方法中添加缺少的 FifaService 依赖项

解决

resolve: { 
  testt: ['$routeParams', 'FifaService', 
    function($routeParams, FifaService ) { 
        return FifaService.getTeamDetails($routeParams.code); 
 }]

Answer 2

不确定这是否是您的问题，但您应该使用 controllerAs 参数。

我的意思是不要使用控制器：'TeamDetailsCtrl as teamDetailsCtrl'

但是控制器：'TeamDetailsCtrl'，控制器为：'teamDetailsCtrl'

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Answer 3

我猜 $routeParams 在 resolve 中不起作用。使用 $route.current.params 代替：

getTeamDeatails: function() {
      var promise = $http.get('api/team');
      promise.then(function(resp){
        return resp.data;
      });
      return promise;
 }

resolve: { 
  testt: ['$route', 'FifaService', 
    function($route, FifaService ) { 
        return FifaService.getTeamDetails($route.current.params.code); 
 }]

Answer 4

您需要改用 $route.current.params.key。 $routeParams 仅在路线更改后更新。所以你的代码应该遵循这些行：

resolve: { 
    functionName: function($route) {
         console.log($route.current.params.key);
    }
}

如何在 resolve 中使用 $routeParams

How to use $routeParams in resolve

resolve

angularjs

angularjs-service

angularjs-http

angular-promise