UI 路由器，在服务中使用 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 应该是 equiliant，我在其他项目中使用过.我如何用 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 之前 状态是准备好.更改状态时会发生几个事件.

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 路由器，在服务中使用 stateparams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！