ui-router 使用动态参数解析

Posted 2023-02-19

【中文标题】ui-router 使用动态参数解析

【英文标题】：ui-router resolve with dynamic parameters

【发布时间】：2013-10-01 11:56:01

【问题描述】：

这可能很简单，但我在文档中找不到任何内容，谷歌搜索也没有帮助。我正在尝试在$stateProvider 中定义一个状态，其中我需要在服务器上点击以提取所需数据的 URL 取决于状态 URL 参数。简而言之，类似于：

 .state('recipes.category', 
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: 
      category: function($http) 
        return $http.get('/recipes/' + cat)
          .then(function(data)  return data.data; );
      
    
  )

以上行不通。我尝试注入$routeParams 以获得所需的cat 参数，但没有成功。这样做的正确方法是什么？

【参考方案1】：

您与$routeParams 关系密切。如果您使用 ui-router，请改用 $stateParams。 这段代码对我有用：

.state('recipes.category', 
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: 
         category: ['$http','$stateParams', function($http, $stateParams) 
             return $http.get('/recipes/' + $stateParams.cat)
                    .then(function(data)  return data.data; );
         ]
     
)

【讨论】：

以及如何在控制器RecipesCategoryCtrl中获取category？

注入它：RecipesCategoryCtrl = function($scope, category) $scope.cat = category

$stateParams 只会返回 url 中给出的参数（如 param 或 :param）。我不希望我的目标状态有 URL。此外，参数是一个对象。要以这种方式传递它，我必须先将其转换为 JSON，然后再将其解析回来。太慢而且太乱了。

【参考方案2】：

对于那些使用 ui-router 1.0 $stateParams is deprecated 的人，你应该使用 $transition$ 对象来代替：

.state('recipes.category', 
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: 
         category: ['$http','$transition$', function($http, $transition$) 
             return $http.get('/recipes/' + $transition$.params().cat)
                    .then(function(data)  return data.data; );
         ]
     
)