如何在不重新加载页面的情况下以角度 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

在不重新加载页面的情况下向当前路由添加或删除 queryParams。

只需更改位置哈希，例如

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){}