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]

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

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("&");
}

编辑：在进一步思考您的问题之后，我认为问题在于您的params周围有一个对象包装器。当你使用它时：

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

我认为通过这样做，ui-sref不知道如何使用子对象处理对象（过滤器）。您需要做的是传递单个对象我认为如果您可以将代码更改为只传递params作为您的代码将起作用的对象。

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

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

1 个答案: