javascript - Angular eliminar parámetro de consulta

¿Cómo eliminaría un parámetro de consulta de la URL? Por ejemplo, de www.expample.com/home?id=123&pos=sd&sd=iii a www.expample.com/home?id=123&sd=iii

EDITAR: Esta es mi versión:

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

Respuesta #1

Puedes eliminar un parámetro de consulta utilizando la opción merge de queryParamsHandling y pasando null para cualquier parámetro que desees eliminar.

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

Esta opción es más sencilla y requiere menos trabajo para asegurarse de que no estás eliminando otros parámetros. Tampoco necesitas preocuparte por limpiar una suscripción observable cuando tu componente se destruye.

Respuesta #2

ACTUALIZACIÓN: La respuesta de @epelc a continuación es la forma actualizada y correcta de hacer esto: https://stackoverflow.com/a/52193044/5932590.

Desafortunadamente, actualmente no hay una forma clara de hacer esto: https://github.com/angular/angular/issues/18011. Sin embargo, como comentó jasonaden en el hilo vinculado,

Esto se podría hacer manualmente combinando los parámetros de consulta antiguos y nuevos, eliminando la clave que no deseas.

Aquí hay una manera de hacer eso:

Digamos que tienes tus queryParams almacenados en algunas propiedades.

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

Un método para limpiar el parámetro pos se vería así:

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

Esto navegará efectivamente a la ruta actual y borrará tu parámetro de consulta pos, manteniendo los demás parámetros de consulta igual.