如何在角度2中设置或删除当前路径中的queryParams而不重新加载页面

Question

我有这条当前路线

http://localhost:96/#/pages/settings/devices

我想将queryParams = {name：realTime}设置为当前路径，如

http://localhost:96/#/pages/settings/devices?name=realTime

是否可以在不重新加载页面的情况下将queryParams添加或删除到当前路由。

我得到了解决方案。

这不会重新加载当前页面

let navigationExtra: NavigationExtras = {
relativeTo: this.activatedRoute,
skipLocationChange: false,
queryParams: { name: 'realTime' }
}
    this.router.navigate(['./', navigationExtra]);

Answer 1

  

ueryParams到当前路线而不重新加载页面。

只需更改位置哈希，例如

window.location.hash = "/pages/settings/devices?name=realTime"

更多

我提供的代码可以正常工作。但是，如果您希望它对应用程序的状态产生影响，您应该检查路由器上的文档，了解如何导航或使用该哈希更改内联编写效果。

Answer 2

为了在没有路由器执行导航的情况下更新URL，请构建URL树并将其设置在当前位置。不要手动构建URL。

 const url = this
        .router
        .createUrlTree([{param1: value1, paramN: valueN}], {relativeTo: this.ar})
        .toString();

 this.location.go(url);

在组件构造函数中注入了位置：

import { DecimalPipe, Location } from '@angular/common';
constructor(private location: Location){}