强制ui-router重新加载查询字符串更改

Question

我的状态定义如下：

$stateProvider.state("app.search", {
    url: "/search?q",
    templateUrl: "App/Search.html",
    controller: "SearchController as vm",
});

当我想导航到搜索页面并指定搜索词时，我可以这样做：

$location.path("search").search({ q: "stuff" });

哪个有效解析为#/search?q=stuff行的网址。如果我随后将搜索字词更改为“内容”，则搜索页面会正确重新激活并按预期进行搜索。

但是，我希望能够指定“随机”查询字符串参数，这些参数尚未在我的网址中定义，然后让这些参数重新加载状态。 （注意：这就是我使用$location.path代替$state.go来更改网址的原因）。例如，如果我正在搜索食物，我的网址可能是：

#/search?q=stuff&type=food

然后我可能会过滤spice级别，这可能会将URL更改为：

#/search?q=stuff&type=food&spice=medium

（等）。

问题是，由于我没有定义所有其他查询字符串参数（在此示例中为type和spice），ui-router不会重新加载我的页面。

我无法将$state.go与{ reload: true }一起使用，因为它会忽略未指定的参数。

有没有办法可以使用“未指定的”查询字符串参数触发页面重新加载？ This post建议我可以制作路由/search*，但似乎没有为我工作。

Answer 1

我还没有找到一个很好的方法来使用ui-router做到这一点。如果您愿意牺牲一点诚信，可以使用替代格式来查询参数。您可以使用单个http url查询参数对象，并使用自定义格式列出所有条件。

e.g。

/search/q?stuff:type=food:spice=cinnamon

路线设置如下：

$stateProvider.state("app.search", {
    url: "/search?q",
    templateUrl: "App/Search.html",
    controller: "SearchController as vm",
});

并使用额外参数进行导航：

$state.go('app.dashboard', { q: 'stuff:type=dessert:spice=cinnamon'});

访问路线上的参数：

$state.params.q

然后您可以解析'stuff'值，然后解析传入的每个名称/值对。

PS＆GT;我不确定冒号（:)分隔符是否有效，但它用于说明提出的想法。