如何在解析中使用 $routeParams答案

【问题标题】：How to use $routeParams in resolve如何在解析中使用 $routeParams
【发布时间】：2016-01-25 18:54:21
【问题描述】：

我现在这样使用$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 没有显示。有任何想法吗？最好的问候

【问题讨论】：

标签： angularjs angularjs-service angular-promise resolve angularjs-http

【解决方案1】：

我猜$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); 
 }]

【讨论】：

【解决方案2】：

回调函数没有返回数据的能力。您的“getTeamDeatails”方法应该返回一个不使用回调的承诺，因为您需要返回已经返回承诺对象的“$http.get”。

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

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

解决

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

【讨论】：

这没有帮助：/
是参考错误：Fifaservice 未定义。在 $Routeprovider 解析测试中，它说。没看到。
检查我的编辑..您在解析函数中缺少 FifaService 依赖项
啊太棒了！我也不需要 UserService 作为依赖项。谢谢！
哦..很高兴来到这里..谢谢:)

【解决方案3】：

您需要改用 $route.current.params.key。 $routeParams 仅在路由更改后更新。所以你的代码应该是这样的：

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

【讨论】：

【解决方案4】：

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

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

但是控制器：'TeamDetailsCtrl'， controllerAs: 'teamDetailsCtrl'

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

【讨论】：

"我们是使用controller键并在里面定义重命名，还是使用controllerAs键单独定义，没有功能上的区别，纯属个人喜好。"从角度启动和运行书:)