从 queryParams angular 2 中删除一个参数答案

【问题标题】：Remove a parameter from queryParams angular 2从 queryParams angular 2 中删除一个参数
【发布时间】：2016-07-04 14:04:21
【问题描述】：

我使用查询参数导航到我的应用程序中的某个页面。从 URL 中获取参数后，我想删除它，理想情况下我会这样：

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

但显然删除功能不存在。有人有替代品吗？

【问题讨论】：

从哪里删除，查询字符串？还是仅来自 params 对象？
来自 params 对象，使其不再显示在 URL 中。
改成不可读的格式总比删掉好。
遇到同样的问题，需要删除查询参数，所以当我路由到另一个页面时，参数不再是 url 的一部分。你找到解决办法了吗？
还没有，我用 window.location 编辑当前 url 但是当我路由到另一个页面时，参数又回来了。

标签： angular

【解决方案1】：

以防万一人们找到这个帖子（就像我一样）。我有这样的场景，我在查询字符串 (/login?jwt=token) 中收到 JWT 令牌。我需要获取此令牌（并存储它等），但随后需要确保它已安全地从 URL 中删除。重新加载登录路由（通过使用this.router.navigate(['login']）在原则上有效，但是，用户可以使用浏览器的后退按钮，基本上是重播令牌登录。

我通过不使用导航而是通过 DI 'Location' 服务（来自@angular/common）解决了这个问题。该服务有一个replaceState 方法，它从历史记录和 URL 中完全删除令牌

 this.location.replaceState('login')

希望对某人有所帮助。

【讨论】：

哦，是的！我想知道将令牌 JWT 从后端发送到前端，看起来这不仅仅是我的问题。谢谢你的回答:)
依赖注入 :-) - 所以将它添加到组件中的构造函数中。
在我的项目中不起作用，我正在使用角度路由器并使用参数路由路径，例如：http://dev.somedomain.sk/parkzones?city=Trnava 删除参数后city 通过location.replaceState('city') 我得到结果http://dev.somedomain.sk/city跨度>
@Luckylooke location:replaceState('city') 不会删除 queryParam，但会将当前路由替换为其中的路由。在您的情况下，您应该使用 location.replaceState('parkzones')
@EinArzt 啊哈，那么它不适合我的用例，因为我需要从许多其他人中删除参数，但我需要将其他人保留在那里.. 在我的应用程序中，我正在对数据设置多个过滤器列表中，我想让它们在 url 中表示，我可以在 url 中添加过滤器参数，但不能轻易删除它们。

【解决方案2】：

您可以将 null 分配给特定的 queryParam ：

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

【讨论】：

我用过类似的东西this.router.navigate(['/home'], {queryParams: {verify_email_token: null}, queryParamsHandling: 'merge'}); 但它不起作用

【解决方案3】：

命令式方法，但更简洁：

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

【讨论】：

对我来说，我认为这是最好的答案，我也添加了replaceUrl，所以它变成了this._router.navigate(['.'], {relativeTo: this._route, queryParams: {}, replaceUrl: true})

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

UPDATE不再需要在rc6中添加queryParams了。

不确定是不是这样：

路由到带有查询参数的组件后，该组件中的所有其他 url 都会自动包含查询参数。每当您导航到另一个网址时，查询参数都会保留。

如果是这样，一种可能的解决方案是在 html 标记上的查询参数

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

如果没有，我其实也对答案感兴趣：P

【讨论】：

这行得通！但是，将其添加到您拥有很多链接的每个链接中可能会很痛苦。但目前我认为这是最好的解决方案。
这不应该是默认行为，但目前（从 RC4 开始）它似乎是......我觉得它很糟糕。

【解决方案6】：

当我想从 url 中删除 access_token 参数时，我正在寻找这样的答案。如果您只想删除一个参数并保留其他参数。

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

由于某种原因需要 setTimeout，如果没有它，navigateByUrl 就无法工作。

【讨论】：

【解决方案7】：

我使用路由方法navigateByUrl。

备用文档：Angular documentation

请记住，您输入它的路径被视为绝对路径。您不能通过此方法使用相对组件路由。

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

【讨论】：

这没有提供解决方案。您需要一种获取当前路由/url 并从中删除查询参数的好方法（据我所知，目前 Angular2 中不存在该参数）。
我撤回了减号投票，因为在过去 router.navigateByUrl() 是删除 queryParams 的唯一选项。这是 Angular2 RC4 和更早版本中的一个错误。但是，此方法现在已不再用于删除查询参数，因为您现在也可以使用 router.navigate() 修改它们。

【解决方案8】：

我建议这种方式兼容 Angular X 的所有路由策略：

    this.route.queryParams.subscribe(params => {
        let token = params['jwt'];
        if (token) {
            this.cache.set({t: 't'}, token);
            window.location.href = this.router.url.split('?')[0];
        }
    });

【讨论】：

【解决方案9】：

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

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【解决方案10】：

如果您需要以编程方式将 queryParams 对象设置为空，您可以手动将其设置为空，而不是像其他答案建议那样在实际的导航行为上。例如：

this.alertClockoff = this.activatedRoute.snapshot.queryParams['alertClockoff'] || null;
if(this.alertClockoff == 'true') {
  Haptics.vibrate();
  setTimeout(() => {
    this.alertClockoff = null;
    // This line:
    this.activatedRoute.snapshot.queryParams = null;
  }, 5000);
}

【讨论】：