ui-router pass URL query parameters to controller via servic

ui-router pass URL query parameters to controller via service - $stateParams values 'undefined'

本文关键字：controller via servic to parameters pass URL query ui-router      更新时间：2023-09-26

使用ui-router并尝试将URL查询参数传递给模块.config中的控制器，使用已注入.state定义的resolve参数的.service。

首选方法-(不可靠地工作) 

.state('list', {
    url: '/list?country&state&city',
    templateUrl: "list.html",
    controller : 'myController',
    resolve: {
          currentUrlTypeParam : ['myServices', function(myServices){        // object variable that can be injected into specified controller
              return myServices.getUrlTypeParams();
            }]
        }
  })

虽然文档中说只有Constant和Provider recipe可以被注入到模块的.config函数中，但我遵循这种将.service注入到.state定义的resolve参数中的方法。

我使用服务的原因是我有许多具有相同URL查询参数的状态-因此将函数作为服务提供者编写一次而不是重复编写是有意义的。

我使用resolve而不是直接注入$stateParams到控制器中，这样我就可以在配置期间完成服务器调用。

这是一个柱塞(显示3个可能的状态与相同的URL参数)-但它不可靠地工作-正确的URL参数似乎到达第二次点击到不同的URL在相同的状态。

更令人沮丧的是，虽然$stateParams似乎在.service函数中正确到达(在第一次点击时)-但是当试图访问它们时，值出现为undefined -检查柱塞console.log以查看这种奇怪的现象!

如
console.log将在.service函数中输出$stateParams:
{country: "US", state: undefined, city: undefined}
然而，当我在函数中调用$stateParams.country时，我得到undefined ??

另一种Messier方法-(工作良好)

另一种方法是在的每个状态定义的resolve参数中重复相同的大型.service代码-这可以可靠地工作，但会使代码膨胀(…(这是我正在处理的状态/参数的简化示例)。

.state('list', {
    url: '/list?country&state&city',
    templateUrl: "list.html",
    controller : 'myController',
    resolve: {
        currentUrlTypeParam : ['$stateParams', function($stateParams){
            var urlTypeParameter = {}                                                                               // define an object that we'll return as the value for $scope.loadMethodParameters
            if($stateParams.country && typeof $stateParams.country !== undefined){
                urlTypeParameter.type = 'country';
                urlTypeParameter.parameter = $stateParams.country;
            } else if($stateParams.state && typeof $stateParams.state !== undefined){
                urlTypeParameter.type = 'state';
                urlTypeParameter.parameter = $stateParams.state;
            } else if($stateParams.city && typeof $stateParams.city !== undefined){
                urlTypeParameter.type = 'city';
                urlTypeParameter.parameter = $stateParams.city;
            } else {
                urlTypeParameter.type = 'default';
            }
            return urlTypeParameter;
        }]
    }
})

看到这个活塞相当…这是一种拙劣的方法。

你的服务不工作的原因是你试图注入$stateParams，而不是将它传递给服务函数本身。

与其将$stateParams注入到服务中并运行return myServices.getUrlTypeParams();，不如尝试将$stateParams传递到服务函数中。例如:

resolve: {
    currentUrlTypeParam : ['$stateParams', 'myServices', function($stateParams, myServices){        // object variable that can be injected into specified controller
        return myServices.getUrlTypeParams($stateParams);
    }]
}

那么你必须修改你的服务为而不是注入$stateParams，而是将其传递到你的服务函数中:

this.getUrlTypeParams = function($stateParams){ ... }
相关文章：