• ENTRAR
  • No hay productos en el carrito.

¿Cómo pasar un array al Router usando queryParams?

Viendo 4 publicaciones - del 1 al 4 (de un total de 4)
  • Autor
    Publicaciones
  • #5701

    Andrés
    Participante

    Hola Israel,

    Quiero usar un Componente que es un formulario, que al darle a “Enviar” cambie la URL de la página, para que otro Componente (que es el padre del Formulario), que está suscrito a los parámetros (queryParams) de la Ruta Activa, envíe una petición a una API y que esta devuelva los datos (json) para actualizarlos en dicho componente.

    Básicamente un listado de propiedades con un formulario de búsqueda que actualice dicho listado.

     

    La cosa es que se hacerlo, me está funcionando, pero me surge un gran problema.

     

    Quiero que la ruta a la que navegue el Formulario tras ser enviado sea de este tipo:

     

    dominio.com/ruta/?param[]=valor1&param[]=valor2&param[]=valor3

     

    Usando un array para un parámetro.

     

    Ya que necesito recoger los valores de un grupo de checkbox del formulario.

    Es el tipo de vivienda que está buscando el usuario

    (puede ser “Piso”, “Casa”, “Chalet”, …) -> (busqueda/?tipo[]=piso&tipo[]=casa)

     

    Lo estoy haciendo como debe hacerse, usando queryParams con el Router, pero como queryParams acepta un Objeto no puedo hacer esto:

     

    this.router.navigate(

    [‘/the-route’],

    queryParams: { ‘param[]’: ‘value1’, ‘param[]’: ‘value2’, ‘param[]’: ‘value3’ }

    );

     

    Porque, por supuesto, no puedo usar el mismo nombre (param[]) varias veces en un objeto.

     

    Es un tipo de URL muy habitual

    ¿Cómo se haría en estos casos?

    • Este debate fue modificado hace 1 año, 4 meses por  Andrés.
    #5704

    Cursosdesarrolloweb
    Jefe de claves

    Hola Andrés,

    Te pongo como ejemplo la navegación al detalle de las notas de la aplicación de rutas.

    
    onSelect(note: Note) {
        const array:Array<string> = []
        array.push('1')
        array.push('2')
        let navigationExtras: NavigationExtras = {
            queryParams: {
                "array": array
            }
        };
        this.router.navigate(['/administration/notes', note.id], navigationExtras);
    }
    

    Y para recibir los datos que vienen a través de navigationExtras debemos hacer lo siguiente en el componente del detalle de la nota.

    
    this.sub = this.route.queryParams.subscribe(params => {
        console.log(params)
    });
    

    ¿No te sirve?.

    Saludos.

    #5708

    Andrés
    Participante

    Gracias Israel

    Eso ya lo había probado solo que la URL de la Ruta en el navegador es del tipo

    localhost:3000/s?type=apartment,house&bedrooms=2,3,4

    Con comas.

    No era lo que buscaba, pero después de varias horas buscando solución el resultado es el mismo

    He parseado luego el valor del parámetro en el Componente y separado los valores, para enviarle a la api una URL del tipo:

    dominio.com/api/search_results?type[]=apartment&type[]=house&bedrooms[]=2&bedrooms[]=3&bedrooms[]=4

    Que para la cosa, funciona exactamente igual que lo que planteaba

    Lo dicho, que muchas gracias por tu ayuda

    #5710

    Cursosdesarrolloweb
    Jefe de claves

    Pienso que es la mejor solución, parsear los resultados una vez los recibes con el router.

    Saludos.

Viendo 4 publicaciones - del 1 al 4 (de un total de 4)

Debes estar registrado para responder a este debate.

Síguenos en las redes sociales para estar al tanto de los últimas novedades :)

Facebook
Facebook
Google+
Google+
https://www.cursosdesarrolloweb.es/forums/topic/como-pasar-un-array-al-router-usando-queryparams-2">
Pinterest
Pinterest
top
Cursosdesarrolloweb ©. Todos los derechos reservados.
🔓Inscríbete a cualquier curso por 9€ y accede a todos los cursos gratuitos para siempre🔓
🌍Los cursos gratuitos son exclusivos de esta plataforma, ÚLTIMOS CURSOS EN 4K🌍
+ +

Login

Create an Account Back to login/register