UI-router，在服务中使用 stateparams [英] UI-router, use stateparams in service

问题描述

我有这个状态:

  .state('admin.category',{
    url: '/category',
    templateUrl:'views/admin.category.html',
    resolve:{
      category: ['CategoryLoader', function(CategoryLoader){
        return new CategoryLoader();
      }]
    },
  })

这是我解决的服务.

.factory('CategoryLoader',['Category', '$state', '$q',
  //console.log($state)
  function(Category, $state, $q){
    return function(){
      var delay = $q.defer();
      Category.get({cat_id:$state.params.id}, //not working
        function(category){
          delay.resolve(category);
        },
       function(){
         //delay.reject('Unable to fetch category ' + $state.params.cat_id)
      });
      return delay.promise;
    }
}]);

如果我将 $state.params.id 更改为数字，一切正常.如果我在我的服务中控制 $state，我会得到一切，包括参数.但我似乎无法使用它.使用我在其他项目中使用过的 $route.current.params.id 应该是等效的.我如何使用 ui-router 做同样的事情?

Everything works if I change $state.params.id to a number. If I console the $state in my service, I get everything, including params. But I can't seem to be using it. It should be equiliant to use $route.current.params.id, which I've used in other projects. How do I do the same thing with ui-router?

更新:更多信息

父状态:

  .state('admin',{
    abstract: true,
    url: '/admin',
    templateUrl:'views/admin.html'
  })

类别工厂:

  factory('Category', function($resource){
    return $resource('/api/category/byId/:id/', {id: '@id'});
  })

如果有需要我会整理一个小提琴

I'll put together a fiddle if necassary

推荐答案

我在这里看到的问题是你试图访问 $stateParams before 状态是准备好.更改状态时会发生多种事件.

The issue I see here is that you are trying to access the $stateParams before the state is ready. There are several events that happen when changing states.

首先是 $stateChangeStart 通知您正在更改和来自的状态以及两种状态的所有参数.

First is $stateChangeStart where you are notified of the state you are changing to and coming from as well as all of the params in both states.

在此之后，解决开始发生.您的解决方案是调用一个使用 $stateParams

After this, the resolve starts to happen. The resolve in your case is calling a function that uses $stateParams

在一切都解决并良好(没有拒绝或错误)之后，并且就在 $stateChangeSuccess 事件之前，状态参数在 $stateParams 对象中更新.

After everything is resolved and good (no rejections or errors), and just prior to the $stateChangeSuccess event, the state params are updated in the $stateParams object.

基本上，在状态更改完成之后之前，您无法通过 $stateParams 对象访问要更改的状态的参数.这是在状态更改被拒绝且无法更改的情况下完成的.在这种情况下，之前的状态仍然存在，之前状态的参数将在 $stateParams 中.

Basically, you cannot access the params for the state you are changing to via the $stateParams object until after the state change is completed. This is done in case the state change is rejected and cannot be changed. In this case, the previous state remains and the previous state's params will be in $stateParams.

作为一种快速解决方法，您可以使用 $stateChangeStart 事件以访问 toParams (您要更改的状态的参数)并将它们放在某处($rootScope 或服务)，以便您可以在需要时访问它们.

As a quick work-around, you can use the $stateChangeStart event to access the toParams (the params for the state you are changing to) and put them somewhere ($rootScope, or a service) so you can access them when you need them.

这是一个使用 $rootScope

.run(['$rootScope', function($rootScope){
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        $rootScope.toParams = toParams;
    });
}]);

.factory('CategoryLoader',['$rootScope', 'Category', '$q',
  function($rootScope, Category, $q){
    return function(){
      var delay = $q.defer();
      Category.get({cat_id: $rootScope.toParams.id}, // <-- notice its using the object we put in $rootScope, not $state or $stateParams
        function(category){
          delay.resolve(category);
        },
       function(){
         //delay.reject('Unable to fetch category ' + $state.params.cat_id)
      });
      return delay.promise;
    }
}]);

另外，我认为您的资源未设置为正确使用您传递的 id.您在上面使用 cat_id，为了将其链接到 URL 的 :id，您必须将其映射为 `{id: '@cat_id'}

Also, I believe your resource is not setup to correctly use the id you are passing. You were using cat_id above, in order to link it to the :id of the URL, you would have to map it as `{id: '@cat_id'}

factory('Category', function($resource){
    return $resource('/api/category/byId/:id/', {id: '@cat_id'});
});

这篇关于UI-router，在服务中使用 stateparams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！