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

Question

我想将搜索查询字符串传递给某个州。\nURL 应如下所示：

\n\n

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

\n\n

我的状态设置如下：

\n\n

.state(\'goods\', {\n            url:        \'/goods?filters\',\n            \xe2\x80\xa6\n        })\n

\n\n

我的链接模板如下所示：

\n\n

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

\n\n

但是，ui-router 没有正确编码它，我得到：

\n\n

/goods?filters=[object Object]\n

\n\n

我该如何正确地做呢？

\n

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 不知道如何处理带有子对象的对象（过滤器）。您需要做的是传递一个对象，我认为如果您可以更改代码以仅将参数作为对象传递，您的代码将起作用。

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