使用 Angular 的 $location 添加或更新当前 URL 参数答案

【问题标题】：Add or update current URL parameter using angular's $location使用 Angular 的 $location 添加或更新当前 URL 参数
【发布时间】：2016-12-07 18:44:35
【问题描述】：

我的 URL 中有一个包含多个参数的页面。我正在尝试编写一个在单击元素时使用的函数。我希望它检查参数 pthree 是否存在。如果是，请将其更新为新值（不要复制它）。如果它不存在，请将其附加到我当前的 URL 并重新加载页面。

我在尝试更新当前 URL 时遇到了问题。

我当前的 URL 结构：

mypage?pone=99.9999999&ptwo=-44.4444444&pthree=1&pfour=1&pfive=1

控制器sn-p：

$scope.test = function (){
   $location.search('pthree', 0);
}

这部分有效。它会更新我的 URL，但会将 #?pthree=0 添加到我当前 URL 的末尾。

我想要的结果是：

mypage?pone=99.9999999&ptwo=-44.4444444&pthree=0&pfour=1&pfive=1

对于我可以做些什么来获得我想要的结果有什么想法吗？提前致谢！

【问题讨论】：

我想你可能想阅读stackoverflow.com/questions/38206805/…
嗨@Vinny。我尝试了您提供的 URL 中接受的答案，但我仍然将 #?pthree=0 添加到我当前 URL 的末尾。

标签： javascript angularjs url parameters

【解决方案1】：

这对我有用。我发现我需要设置我的应用程序的 HTML5 模式。在此处阅读有关 HTML5 模式的更多信息：https://docs.angularjs.org/guide/$location。

在此之后，我在调用 $location.search({ pThree: '0' } 时遇到了另一个问题。它开始覆盖我所有的其他参数。例如，URL 结构正在更改为 ?pThree=0。为了解决这个问题，我必须读取所有参数，更新 pThree，然后全部写回。

我希望这对其他人有所帮助。

【讨论】：

【解决方案2】：

你可以很容易地做到这一点，只需这样做：

// existing url with params
// http://myurl.com/path/view/etc?param1=abc&param2=def

// add your new param to the search() object
$location.search().param3 = 'ghi';

// set your search again with the updated search object
$location.search( $location.search() );

这将像这样更新您的网址：

// http://myurl.com/path/view/etc?param1=abc&param2=def&param3=ghi

【讨论】：