javascript - ui-router 通过服务将 URL 查询参数传递给 Controller ​​ - $stateParams 值 'undefined'

Question

使用 ui-router 并尝试使用已注入(inject)到 .config 中的 .service 将 URL 查询参数传递到模块的 .config 中的 Controller 。 .state 定义的 code>resolve 参数。

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

.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 配方可以注入(inject)到模块的 .config 函数中，但我遵循 this method of injecting a .service into the resolve argument .state 定义。

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

我使用 resolve 而不是直接将 $stateParams 直接注入(inject) Controller ，以便我可以在配置期间完成服务器调用。

Here's a plunker的(显示具有相同 URL 参数的 3 种可能状态) - 但是它不能可靠地工作 - 正确的 URL 参数似乎在第二次单击相同状态的不同 URL 时到达。

更令人沮丧的是，虽然 $stateParams 似乎正确到达(第一次单击时).service 函数 - 但值显示为 尝试访问它们时未定义 - 检查 plunker console.log 以查看这种奇怪的现象!

例如
console.log 将在 .service 函数中输出 $stateParams 如下:
{国家:“美国”，州:未定义，城市:未定义}
但是，当我在函数中调用 $stateParams.country 时，我得到 undefined ??

替代梅西耶方法 - (工作正常)

另一种方法是在每个状态定义的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;
        }]
    }
})

参见this plunker以一种相当......不优雅的方式来实现同样的事情。

Answer 1

您的服务无法工作的原因是您尝试注入(inject) $stateParams，而不是将其传递到服务函数本身。

不要将 $stateParams 注入(inject)到您的服务中并运行 return myServices.getUrlTypeParams();，而是尝试将 $stateParams 传递到您的服务函数中。例如:

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

然后您必须修改您的服务以不注入(inject)$stateParams，而是将其传递到您的服务函数中:

this.getUrlTypeParams = function($stateParams){ ... }