强制 ui-路由器在查询字符串更改时重新加载

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，有效解析为 url。如果我随后将搜索词更改为 "things"，搜索页面将正确重新激活并按预期进行搜索。

但是，我希望能够指定 "random" 查询字符串参数 ，这些参数在我的 url 中没有定义，然后让那些参数也重新加载状态。（注意：这就是为什么我使用 $location.path 而不是 $state.go 来更改 URL 的原因）。例如，如果我正在寻找食物，我的 URL 可能是：

#/search?q=stuff&type=food

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

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

（等）。

问题是，因为我还没有定义所有其他查询字符串参数（本例中的 type 和 spice），ui-router 没有重新加载我的页面。

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

有没有一种方法可以使用 "unspecified" 查询字符串参数触发页面重新加载？ This post 建议我可以使用路由 /search*但这似乎对我不起作用。

Answer 1

我还没有找到使用 ui-router 执行此操作的好方法。如果您愿意牺牲一点完整性，您可以为查询参数使用另一种格式。您可以使用单个 http url 查询参数对象并使用自定义格式列出所有条件。

例如

/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' 值，然后解析传入的每个 name/value 对。

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

Force ui-router to reload on querystring changes