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

Question

我想将搜索查询字符串传递给一个州。 网址应如下所示:

/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]

我该如何正确地做到这一点？

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 });

或者像这样编写你自己的 vanilla 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>