将对象作为查询字符串参数传递

Question

我希望将搜索查询字符串传递给状态。 URL 应该看起来像这样：

/goods?filters[paramA]=1&filters[paramB]=2

我的状态设置如下：

.state('goods', {
            url:        '/goods?filters',
            …
        })

我的链接模板是这样的：

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

然而，ui-router未能正确编码它，我得到了以下结果：

/goods?filters=[object Object]

我应该如何正确地做呢？

- CamaroSS

---

到目前为止，我已经解决了将丑陋的JSON作为参数的问题。虽然不太好看，但至少可读性好并且可以轻松地操作。 - CamaroSS

Answer 1

为了实现您想要的功能，您需要使用$stateParams而不是您试图使用的查询字符串。（虽然可以使用查询字符串，但使用$stateParams更容易）

首先，您需要将参数与状态分配/注册。

$stateProvider
.state('someState', {
    url: "/someLinkPath/:Param1",
    templateUrl: 'stateHTML.html',
    controller: function ($stateParams) {
        console.log($stateParams);
    }
});

然后，您可以构建一个$stateParams对象并将其传递到所需状态的链接中。

如果您确实需要使用查询字符串，则需要展平要添加到字符串中的对象。

您可以使用$.param（jQuery）：

var yourParams = $.param({ param1: Value1, param2: Value2 });

"

或者编写您自己的原生JS函数，如下所示：

"

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}

编辑： 经过进一步思考，我认为您的问题是您的参数周围有一个对象包装器。 当您使用以下内容时：

<a ui-sref="goods({ filters: { paramA: 1, paramB: 2}})">Menu item label</a>

我认为这样做是因为ui-sref不知道如何处理具有子对象的对象（filter）。你需要做的是传递一个单一的对象。如果您可以将代码更改为仅将参数作为对象传递，那么您的代码将起作用。

<a ui-sref="goods({ paramA: 1, paramB: 2})">Menu item label</a>

- Jared Reeves

---

我需要一个查询字符串，因为这是一个带有许多参数的搜索表单。我知道$.param()，但我也找不到通过ui-sref传递查询字符串的方法。可以通过序列化搜索参数数组并将其作为单个参数传递来解决问题，但我正在寻找更简洁的方法。 - CamaroSS

如果您从ui-sref中删除过滤器，会发生什么情况，例如：ui-sref="goods({ paramA: 1, paramB: 2})"。 - Jared Reeves

它完全不留下任何查询字符串。 - CamaroSS