Angular 5删除查询参数

Question

如何从URL中删除查询参数.例如来自www.expample.com/home?id=123&pos=sd&sd=iiimakewww.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选项删除查询参数,queryParamsHandling并null为要删除的任何参数传入.

// Remove query params
this.router.navigate([], {
  queryParams: {
    yourParamName: null,
    youCanRemoveMultiple: null,
  },
  queryParamsHandling: 'merge'
})

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

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查询参数,使您的其他查询参数保持不变.