从queryParams angular 2中删除参数

问题描述：

我使用查询参数导航到我的应用中的某个页面。后，我得到我想删除它的URL参数，理想我想有这样的：从queryParams angular 2中删除参数

let userToken: string; 
    this.sub = this.router 
     .routerState 
     .queryParams 
     .subscribe(params => { 
     userToken = params['token']; 
     params['token'].remove(); 
     });

但显然remove函数不存在。有人有另一种选择吗？

来自哪里，查询字符串中删除？或仅来自'params'对象？ – dfsq

从params对象，以便它不会再显示在URL中。 –

将其更改为不可读的格式比删除它好。 – micronyks

答

以防万一找到这个线程（就像我做的那样）。我有在查询字符串（/ login？jwt = token）中收到JWT令牌的场景。我需要获取该令牌（并将其存储等），但需要确保它已从URL中安全地移除。重新加载登录路由（通过使用this.router.navigate（['login']）在principe工作，但是，用户然后可以使用浏览器后退按钮，基本上重放令牌登录。

我解决了这个使用导航而是由DI'ing“位置”服务（从@角/公共端），该服务具有“replaceState”的方法，可以完全消除从历史上令牌作为WEL从URL

this.location.replaceState('login')

希望帮助别人。

哦，是啊！我很喜欢从后端向前端发送令牌JWT，它看起来不仅仅是我的问题。感谢您的回答：） – Mariusz

答

我使用路由器方法navigateByUrl。

备用DOC：Angular documentation

请记住，你给它的路径是绝对的处理。此方法不能使用相对组件路由。

我的用途是我有一个组件作为auth事件的外部回调，例如重置密码和电子邮件验证。一旦操作完成，任何导航行动需要时会发生通过router.navigateByUrl(path)

这不提供解决方案。您需要一个获取当前路由/ url的好方法，并从中删除查询参数（据我所知，此时此刻在Angular2中不存在）。 – Jakub

我还原了负面投票，因为回到当天，router.navigateByUrl（）是删除queryParams的唯一选项。这是Angular2 RC4和更旧版本中的一个bug。但是，这种方法现在已经不再适用于删除查询参数，因为您现在可以使用router.navigate（）修改它们。 –

答

UPDATE没有必要添加queryParams在RC6了。

不知道这是否是这样：

路由与查询参数组件后，这个组件中的其他所有网址包含查询自动PARAMS。任何时候当你导航到另一个网址时，查询参数就会保留。

如果是这样，一个可能的解决办法是在查询参数的html标记

<a [routerLink]="['/abcd']" [queryParams]="{}">

如果不是，其实我也有兴趣在回答：P

这个工程！可能是一个痛苦，但是将其添加到您的每一个链接都有很多。但现在这是我猜想的最佳解决方案。 –

这不应该是默认的行为，但在目前（从RC4开始）它看起来像是......我发现它很糟糕。 – dudewad

答

HTML5包括history.pushState API，它允许您添加历史条目并更改当前显示在浏览器中的URL。（操纵浏览器历史）

window.history.pushState('', 'title', '/expected-url');

您可以使用此行代码在你Angular2应用。这只会改变应用程序的URL而不是状态。（结果查询参数从给定的url中删除）

感谢James的编辑。 –

答

我一直在寻找这样的答案时，我想删除从的access_token URL参数。如果你只是想删除一个参数并保留其他参数。需要出于某种原因

setTimeout(() => { 
    let urlWithoutAccessToken = this.router.url.replace(new RegExp('.access_token=' + idToken), ''); 
    this.router.navigateByUrl(urlWithoutAccessToken); 
}, 0);

的setTimeout的，该navigateByUrl没有没有它的工作。

答

势在必行的方法，但清洁：

this.router.navigate(['.'], { relativeTo: this.route, queryParams: {} });

答

您可以指定null到特定queryParam：

this.router.navigate([], {queryParams: {page: null}, queryParamsHandling: 'merge'});

从queryParams angular 2中删除参数

相关推荐