如何将 $stateParams 注入状态解析

Question

我一直在为一个项目编写一些代码，但在使用 $stateParams 时遇到了问题。我正在尝试通过解析将项目名称注入我的服务，但它不断出现未定义的情况。我意识到我需要 $stateParams 来定义它，但我似乎无法将 $stateParams 注入到服务中。这是我的代码和错误，提前谢谢你。

错误

Uncaught Error: [$injector:modulerr] 
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=MenuAppX&p1=ReferenceError%3A%20%24stateParams%20is%20not%20defined%0A%20%20%20%20at%20RoutesConfig%20(http%3A%2F%2Flocalhost%3A3000%2Fsrc%2Froutes.js%3A30%3A14)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A44%3A357)%0A%20%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A237)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A376%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20gb%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A46%3A251)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A332)%0A%20%20%20%20at%20xe%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A21%3A1)
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at gb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at xe (angular.min.js:21)
at angular.min.js:333
at HTMLDocument.b (angular.min.js:38)

状态

.state('items', {
    url: '/menuItems/{itemId}',
    templateUrl: 'src/MenuApp/template/items.template.html',
    params: {$stateParams, itemId: null},
    controller: 'itemsXController as itemsX',
    resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, itemId, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }
})

服务

(function () {
  'use strict';

  angular.module('data')
  .service('MenuDataService', MenuDataService)
  .constant('categoryBasePath', "https://davids-
restaurant.herokuapp.com/menu_items.json?category=");

  MenuDataService.$inject = ['$http', '$q', '$timeout','categoryBasePath'];
  function MenuDataService($http, $q, $timeout, categoryBasePath) {
var service = this;

service.getAllCategory = function() {
  var deferred = $q.defer();
  var categoriesResult =  $http({
    method: "GET",
    url: ('https://davids-restaurant.herokuapp.com/categories.json'),
  });
  $timeout(function () {
    deferred.resolve(categoriesResult);
  }, 800);
  return deferred.promise;
}
service.getItemsForCategory = function(itemId) {
  var deferred = $q.defer();
  console.log(itemId);
  var itemsResult =  $http({
    method: "GET",
    url: ('https://davids-restaurant.herokuapp.com/menu_items.json?category=L'),
  });
  $timeout(function () {
    deferred.resolve(itemsResult);
  }, 800);
  console.log(deferred.promise);
  return deferred.promise;
}
  };
})();

模板（调用状态的那个）

<a ui-sref="items">This Page works</a>
<ol>
  <li ng-repeat="item in categoriesX.categories"  ui-sref="items({itemId: 
categoriesX.categories[$index].short_name})">
{{ categoriesX.categories[$index].name }}
  </li>
</ol>

Answer 1

从解析函数中删除itemid

改一下

 resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, itemId, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }

到这里

 resolve: {
      itemsResult: ['MenuDataService, $stateParams', function 
      (MenuDataService, $stateParams) {
        return MenuDataService.getItemsForCategory($stateParams.itemId);
      }]
   }

Answer 2

    .state('items', {
    url: '/menuItems/{itemId}',
   templateUrl: 'src/MenuApp/template/items.template.html',
   params: { itemId: null},
  controller: 'itemsXController as itemsX',
   resolve: {
  itemsResult: ['MenuDataService, $stateParams', function 
  (MenuDataService, itemId, $stateParams) {
    return MenuDataService.getItemsForCategory($stateParams.itemId);
  }]
   } 
   })