Question

如何从URL中删除查询参数。例如，来自www.expample.com/home?id=123&pos=sd&sd=iii make www.expample.com/home?id=123&sd=iii

编辑：我的版本

this.activatedRoute.queryParams.subscribe(c => {
  const params = Object.assign({}, c);
  delete params.dapp;
  this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: params });
}).unsubscribe();

Answer 1

您可以通过使用merge的{{1}}选项并为要删除的任何参数传入queryParamsHandling来删除查询参数。

null

此选项更简单，所需的工作更少，以确保您不会删除其他参数。您也不必担心在销毁组件时清理可观察的订阅。

Answer 2

不幸的是，目前没有明确的方法：https://github.com/angular/angular/issues/18011。但是，正如jasonaden对链接线程所评论的那样，

这可以通过合并旧的和新的查询参数手动完成，删除你不想要的密钥。

这是一种方法：

假设您将queryParams存储在某些属性中。

class MyComponent() {
  id: string;
  pos: string;
  sd: string;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.route.url.subscribe(next => {
      const paramMap = next.queryParamMap;
      this.id = paramMap.get('id');
      this.pos = paramMap.get('pos');
      this.sd = paramMap.get('sd');
    });
  }
}

清除pos参数的方法如下所示：

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

这将有效导航到当前路线并清除您的pos查询参数，使您的其他查询参数保持不变。

Answer 3

您可以使用本机javascript操作从网址中删除queryParams，并使用navigateByUrl方法导航到“视图”

https://angular.io/api/router/Router#navigateByUrl

this.route.queryParams
      .subscribe((params: Params) => {
        if (params && Object.keys(params).length > 0) {
          const urlWithoutQueryParams = this.router.url.substring(0, this.router.url.indexOf('?'));
          this.router.navigateByUrl(urlWithoutQueryParams)
            .then(() => {
            // any other functionality when navigation succeeds
              params = null;
            });
        }
      });

Answer 4

我写了一些路由器原型替代，使事情更容易处理查询参数：

这个想法是在路由器上调用一种方法，以通过参数轻松管理路由，而不必每次都导出功能/重新声明功能。

创建一个包含原型替代定义的index.d.ts文件：

// Ensure this is treated as a module.
export { };

declare module '@angular/router' {
    interface Router {
        updateQueryParams(activatedRoute: ActivatedRoute, params: Params): Promise<boolean>;
        setQueryParams(activatedRoute: ActivatedRoute, params: Params): Promise<boolean>;
        removeQueryParams(activatedRoute: ActivatedRoute, ...keys: string[]): Promise<boolean>;
    }
}

重要：

在使用此原型替代之前，请确保您已导入此文件，我刚刚将我的原型导入添加到了app.module.ts：

import './shared/prototype-overrides/router.prototypes';

设置查询参数

这只会设置指定的查询参数，而不会合并参数。

场景

您在以下路线上：

http://localhost:4200/#/some-route?param1=Test&param2=test2

，您想将查询参数设置为param3=HelloWorld，删除其他参数。

用法

this.router.setQueryParams(this.activatedRoute, { param3: 'HelloWorld' });

// Will route to http://localhost:4200/#/some-route?param3=HelloWorld

原型功能实现

Router.prototype.setQueryParams = function (activatedRoute: ActivatedRoute, params: Params): Promise<boolean> {
    const context: Router = this;

    if (isNullOrUndefined(activatedRoute)) {
        throw new Error('Cannot update the query parameters - Activated Route not provided to use relative route');
    }

    return new Promise<boolean>((resolve) => {
        setTimeout(() => {
            resolve(context.navigate([], {
                relativeTo: activatedRoute,
                queryParams: params
            }));
        });
    });
};

更新查询参数

这用于轻松更新queryParams，它将合并路由中的查询参数，因此您没有重复的查询参数。

场景

您在以下路线上：

http://localhost:4200/#/some-route?param1=Test&param2=test2

，您只想更新一个查询参数，param1至param1=HelloWorld，而其他参数保持原样。

用法

this.router.updateQueryParams(this.activatedRoute, { param1: 'HelloWorld' });

// Will route to http://localhost:4200/#/some-route?param1=HelloWorld&param2=test2

原型功能实现

Router.prototype.updateQueryParams = function (activatedRoute: ActivatedRoute, params: Params): Promise<boolean> {
    const context: Router = this;

    if (isNullOrUndefined(activatedRoute)) {
        throw new Error('Cannot update the query parameters - Activated Route not provided to use relative route');
    }

    // setTimeout required because there is an unintended behaviour when rapidly firing router updates in the same repaint cycle:
    // 
    // NavigationCancel - Navigation ID 2 is not equal to the current navigation id 3
    // https://stackoverflow.com/a/42802182/1335789
    return new Promise<boolean>((resolve) => {
        setTimeout(() => {
            resolve(context.navigate([], {
                relativeTo: activatedRoute,
                queryParams: params,
                queryParamsHandling: 'merge'
            }));
        });
    });
};

删除查询参数

场景

您在以下路线上：

http://localhost:4200/#/some-route?param1=Test&param2=test2&param3=test3

，您只想删除一个（或多个，用字符串分隔的键）查询参数param1，而其他保持不变。

用法

this.router.removeQueryParams(this.activatedRoute, 'param1');

// Will route to http://localhost:4200/#/some-route?param2=test2&param3=test3

//Removing multiple parameters:
this.router.removeQueryParams(this.activatedRoute, 'param1', 'param3');

// Will route to http://localhost:4200/#/some-route?param2=test2

原型功能实现

Router.prototype.removeQueryParams = function (activatedRoute: ActivatedRoute, ...keys: string[]): Promise<boolean> {
    const context: Router = this;

    const currentParams: any = {};
    Object.keys(activatedRoute.snapshot.queryParams).forEach(key => {
        currentParams[key] = activatedRoute.snapshot.queryParams[key];
    });
    keys?.forEach(key => {
        delete currentParams[key];
    });

    return new Promise<boolean>((resolve) => {
        setTimeout(() =>
            resolve(context.setQueryParams(activatedRoute, currentParams))
        );
    });
};

Answer 5

删除查询参数：

import { Router, ActivatedRoute, Params } from '@angular/router';

constructor(private router: Router, private activatedRoute: ActivatedRoute){
}

setQueryParams(){
    const qParams: Params = {};
    this.router.navigate([], {
        relativeTo: this.activatedRoute,
        queryParams: qParams,
        queryParamsHandling: ''
    });
}

Answer 6

这是我发现的最好的Sulotion，您可以更改url参数

在构造函数中使用

    private _ActivatedRoute: ActivatedRoute

然后在init或构造函数主体中使用它

    var snapshot = this._ActivatedRoute.snapshot;
    const params = { ...snapshot.queryParams };
    delete params.pos
    this.router.navigate([], { queryParams: params });

Angular 5删除查询参数

6 个答案:

设置查询参数

场景

用法

原型功能实现

更新查询参数

场景

用法

原型功能实现

删除查询参数

场景

用法

原型功能实现