Angular 5 eliminar parámetro de consulta

Ten en cuenta que en la informática cualquier problema casi siempere puede tener diversas resoluciones, de igual modo nosotros te compartiremos lo más óptimo y mejor.

Solución:

Puede eliminar un parámetro de consulta mediante el merge opción de queryParamsHandling y pasando en null para cualquier parámetro que desee eliminar.

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

Esta opción es más simple y requiere menos trabajo para garantizar que no elimine otros parámetros. Tampoco necesita preocuparse por limpiar una suscripción observable cuando se destruye su componente.

ACTUALIZAR: La respuesta de @epelc a continuación es la forma correcta y actualizada 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 podría hacerse manualmente fusionando los parámetros de consulta antiguos y nuevos, eliminando el key no quieres

Aquí hay una forma de hacerlo:

Digamos que tiene sus 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 pos el parámetro 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á su pos parámetro de consulta, manteniendo los demás parámetros de consulta iguales.

Esta es la mejor solución que encontré, puedes cambiar los parámetros de URL

en uso del constructor

    private _ActivatedRoute: ActivatedRoute

luego use esto en init o en el cuerpo del constructor

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

Aquí puedes ver las reseñas y valoraciones de los lectores

Te invitamos a sustentar nuestro quehacer fijando un comentario y dejando una puntuación te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador