将复杂对象传递给 ui-sref 参数

Question

我需要这样的构建网址： /list?filter[status]=1&filter[type]=2

我愿意：

链接：

<a ui-sref="list({filter: {status: 1, type:2}})">List</a>

（在参数中传递复杂对象，如果传递简单对象 - {filter: 1} - 可以，但我需要这个）

状态：

.state('list', {
    url:        '/list?filter',
    …
})

我总共得到如下网址：

/list?filter=[object Object]

演示：http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview

我该如何解决？

Answer 1

UI-Router 现在支持 custom types 参数。你的 plunker 有updated and working version。

所以，我们可以这样调整状态定义：

app.config(function($stateProvider) {
  $stateProvider.state('list', {
    url: 'list?{filter:CoolParam}',

我们可以看到，过滤器现在的类型是 CoolParam。在这里我们将定义它：

app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {

  $urlMatcherFactory.type('CoolParam',
  {
     name : 'CoolParam',
     decode: function(val)  { return typeof(val) ==="string" ? JSON.parse(val) : val;},
     encode: function(val)  { return JSON.stringify(val); },
     equals: function(a, b) { return this.is(a) && this.is(b) 
                                  && a.status === b.status && a.type == b.type },
     is: function(val)      { return angular.isObject(val) 
                                  && "status" in val && "type" in val },
  })

}]);

现在是这样的链接的{{$stateParams}}：

<a ui-sref="list({filter: {status: 1, type:2}})">Click me to see params</a>

将返回：

{"filter":{"status":1,"type":2}}

注意：在这种情况下，我让我的生活更轻松，只需将 json 转换为字符串。这意味着，url 编码的参数将如下所示：

#/list?filter=%7B%22status%22:1,%22type%22:2%7D

这是{"status":1,"type":2}

但我们也可以提供其他方式来表达我们的过滤器对象

查看here

还有相关问答：

• Angular ui router parse query params into booleans
• What is the correct way to use the “bool” param type with ui-router?

因此，上述解决方案可以很好地将过滤器用作 JSON。但是如果我们必须有这样的 url ?filter[status]=1&filter[type]=2，我们必须以不同的方式定义状态。每个参数都必须声明为一个单独的简单类型

$stateProvider.state('list2', {
    url: 'list2?state&type',
})

但在这种情况下，我们将拥有这样的?status=1&type=2。此映射也是此plunker 的一部分。