Question

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

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

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

Answer 1

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

我通过不使用导航但通过DI''位置'服务（来自@angular/common）解决了这个问题。此服务具有replaceState方法，该方法从历史记录和URL

中完全删除令牌

 this.location.replaceState('login')

希望能有所帮助。

Answer 2

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

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

Answer 3

更新不再需要在rc6中添加 queryParams 。

不确定是否是这种情况：

在使用查询参数路由到组件后，此组件中的所有其他URL自动包含查询参数。无论何时导航到另一个URL，查询参数都会保留。

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

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

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

Answer 4

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

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

Answer 5

我使用路由器方法navigateByUrl。

替代文档：Angular documentation

请记住，您提供的路径被视为绝对路径。您不能使用此方法使用相对组件路由。

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

进行任何导航操作

Answer 6

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

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

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

Answer 7

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

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

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

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

Answer 9

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

Answer 10

如果您需要以编程方式将 queryParams 对象设置为空，您可以手动将其设置为 null，而不是按照其他答案建议的实际导航操作。例如：

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

从queryParams angular 2中删除参数

10 个答案: