2

tengo un problema. Tengo un filtro que de busqueda y paso esos parametros de busqueda a otra vista a traves de los parametros en la ruta. el problema que tenga actualmente es que el filtro tiene 6 parametros, y puede que el usuario solo llene 4 de los 6 campos del formulario, y cuando lo envia me da error porque en la ruta tengo definido los 6 parametros de esta forma:

{ path: 'inmuebles/:tipo/:transaccion/:pais/:cuartos/:precio_min/:precio_max',component: VistaInmuebleComponent}

y asi es como hago el envio del formulario en el boton:

(click)="filtro(formulario.value)" [routerLink]="['/inmuebles',formulario.controls['tipo'].value,formulario.controls['transaccion'].value,formulario.controls['pais'].value,formulario.controls['cuartos'].value,formulario.controls['precio_min'].value,formulario.controls['precio_max'].value]"

Existe alguna forma de poner los parametros "precio_min" y "precio_max" como opcional ? que si el usuario no los completa igual se pueda enviar el formulario ? en este momento me da error porque en la ruta tengo definidos 6 parametros y envio 4 si el usuario no selecciona esos 2. Como podria hacer para resolver eso? gracias de antemano al que me pueda ayudar.

1 respuesta 1

4

La documentación oficial de angular explica que se debe utilizar route parameters cuando se tienen parámetros no opcionales (documentación), cuando se trabaja con parámetros opcionales se recomienda utilizar query parameters. Para este caso en particular se podría implementar de la siguiente manera:

{ path: 'inmuebles/:tipo/:transaccion/:pais/:cuartos', component: VistaInmuebleComponent }

enlace a ruta:

<a (click)="filtro(formulario.value)"
   [routerLink]="['/inmuebles', formulario.controls['tipo'].value, formulario.controls['transaccion'].value, formulario.controls['pais'].value, formulario.controls['cuartos'].value]"
   [queryParams]="{'precio_min': formulario.controls['precio_min'].value, 'precio_max': formulario.controls['precio_max'].value}">
  ...
</a>

recepción de parámetros:

// ...
import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class VistaInmuebleComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        console.log(params); // {"precio_min": <min>, "precio_max": <max>}
      });
  }
}

Para más información sobre query parameters puedes revisar este enlace.

3
  • Hola @Jonathan, gracias por responder. coloque tal cual como lo hiciste pero me da error. cuando defino la ruta, aqui: { path: 'inmuebles/:tipo/:transaccion/:pais/:cuartos', component: VistaInmuebleComponent } no deberian de ir los 6 parametros? coloque eso tal cual y el otro codigo que colocaste con el queryParams pero me muestra error, parte del error dice esto: compiler.js:2175 Uncaught Error: Template parse errors: Parser Error: Missing expected ] at the end of the expression [['/inmuebles',formulario.controls['tipo'].value,formulario.controls['transaccion'].value,...
    – JulianProg
    Commented el 10 ago. 2019 a las 16:48
  • Hola, @JulianProg, primero que nada, como había explicado en la respuesta, no se pueden poner parámetros de ruta opcionales, es decir, los parámetros: tipo, transaccion, pais y cuartos son parámetros fijos que no pueden faltar, los parámetros opcionales precio_min y precio_max se pasan mediante query params, un ejemplo de la ruta formada sería /inmuebles/<tipo>/<transaccion>/<pais>/<cuartos>?precio_min=<min>&precio_max=<max>. El error que mencionas es porque pusiste un corchete de más al inicio [['/inmue... -> ['/inmue... Commented el 10 ago. 2019 a las 18:01
  • Ok, ya logre resolver amigo. Ahora... se que no es lo ideal, pero que podria usar para que al recargar una pagina o vista los datos que tenia no se pierdan y se vuelvan a mostrar? seria con local storage o habria una mejor forma de hacerlo?
    – JulianProg
    Commented el 13 ago. 2019 a las 16:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.