2016-07-04 137 views
6

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

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

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

+0

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

+0

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

+0

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

回答

24

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

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

this.location.replaceState('login') 

希望帮助别人。

+0

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

1

我使用路由器方法navigateByUrl

备用DOC:Angular documentation

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

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

+0

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

+0

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

2

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

不知道这是否是这样:

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

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

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

如果不是,其实我也有兴趣在回答:P

+0

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

+0

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

0

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

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

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

+0

感谢James的编辑。 –

2

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

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

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

0

势在必行的方法,但清洁:

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

0

您可以指定null到特定queryParam:

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