如何在不重新加载页面的情况下以角度 2 设置或删除当前路线中的 queryParams

Posted 2023-02-22

【中文标题】如何在不重新加载页面的情况下以角度 2 设置或删除当前路线中的 queryParams

【英文标题】：How to set or remove queryParams in current route in angular 2 without reloading page

【发布时间】：2017-12-29 15:03:34

【问题描述】：

我有这条当前路线：

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]);

【问题讨论】：

您在 URL 中使用 #，表示 SPA。那是;您的页面不会从服务器重新加载。如果您绑定到 URL，组件可能会更新。否则，这个问题归结为如何通过angular更新路由，其中​​有很多例子

Change route params without reloading in angular 2的可能重复

我得到了解决方案。这不会重新加载当前页面 let navigationExtra: NavigationExtras = relativeTo: this.activatedRoute, skipLocationChange: false, queryParams: name: 'realTime' this.router.navigate(['./', navigationExtra]);跨度>

【参考方案1】：

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

只需更改位置哈希，例如

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

更多

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

【参考方案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)