Lectura de Parámetros URL en Angular para Filtrado y Navegación

Clase 9 de 25 • Curso de Angular Router: Lazy Loading y Programación Modular

Resumen

Una característica sobre las URL es la posibilidad de transportar información opcional a través de parámetros de consulta.

Query Params

Los parámetros de ruta, por ejemplo /catalogo/:categoryId, son obligatorios. Sin el ID la ruta no funcionaría. Por otro lado, existen los parámetros de consulta que los reconocerás seguidos de un ? y separados por un &, por ejemplo /catalogo?limit=10&offset=0.

1. Creando rutas con parámetros

Para crear rutas con este tipo de parámetros, utiliza la directiva queryParams propia de Angular de la siguiente manera.

<div class="header-right hidde-menu">
    <a routerLink="/catalogo" [queryParams]="{ category: 'electronica' }" routerLinkActive="active">Electrónica</a>
</div>

La directiva queryParams recibe un objeto y creará la ruta /catalogo?category=electronica.

2. Capturar parámetros en las rutas

Para capturar estos datos en el componente, es aconsejable realizarlo en el hook de ciclo de vida ngOnInit().

// modules/website/component/catalogo/catalogo.component.ts
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams
      .subscribe((params: Params) => {
        console.log(params.category);
      });
  }
}

Suscribiéndote a queryParams, podrás capturar y hacer uso de esta información.

Recuerda que estos parámetros suelen no ser obligatorios, tu aplicación debería seguir funcionando si los mismos no existen.

Contribución creada por: Kevin Fiorentino.

Joel Moises Boada Velasquez

student•

Me gusto esta clase. Desconocía esto.

En resumen, En Angular los queryParams son parámetros opciones que pueden viajar en la ruta de la app, y me permiten volver sharedable (compartible) una pagina dándole funcionalidad extra en dependencia de ellos.

A diferencia de los params típicos que también son sharedables pero obligatorios y generalmente me redirigen a otra pagina.

David Higuera

student•

Concuerdo Joel y además estos query params son una propiedad nativa del standard de URL por lo que son una parte fundamental en el desarrollo web:

MDN web docs

Anderson Duarte Santos

student•

Para el reto, repetí la referencia del "productId" pero en category

[category.component.ts]

export class CategoryComponent implements OnInit {
  ...
  productId: string | null = null;

  constructor(
    private route: ActivatedRoute,
    ...
  ) {}

  ngOnInit(): void {
    ...
    this.route.queryParamMap.subscribe((params) => {
      this.productId = params.get('product');
    });
  }
  ...
}

[category.component.html]

<app-products [productId]="productId" ...></app-products>

✌️Saludos!

Carlos Dugarte

student•

Está buenísimo, este clase me ayudó mucho a resolver un problema del trabajo

Santiago Velandia Gallo

student•

Esta es mi solución, porfa si alguien tiene alguna recomendación o corrección es bienvenida

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {switchMap} from 'rxjs/operators'

import {ProductsService} from '../../services/products.service';
import {Product} from '../../models/product.model';

@Component({
  selector: 'app-category',
  template: `<app-products
[productId]="productId"
[products]="products"
(loadMore)="loadMore()"></app-products>`,
  styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {

  categoryId: string | null= null;
  products: Product[] = [];
  limit = 10;
  offset = 0;
  productId: string | null = null;

  constructor(
    private route: ActivatedRoute, //leer parametros desde el routing
    private productsService: ProductsService
    ) { }

  ngOnInit(): void {
    this.route.paramMap
    .pipe(
      switchMap((params) =>{
        this.categoryId = params.get('id');
        if (this.categoryId){
          return this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
        }
        return[];
      })
    ).subscribe((data)=>{
      this.products = data;
      this.route.queryParamMap.subscribe((params) => {
        this.productId = params.get('product');
      });
    });
  }

  loadMore(): void {
    if (this.categoryId){
    this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
    }
  }
}

Kevin Candia

student•

Recuerden darle unsubscribe a la subscripción de queryParamMap ya que si cambian de página, éste seguira esperando querys cuando no estamos en la página.

import { Subscription }       from 'rxjs/internal/Subscription';

#querys$ = new Subscription();

ngOnInit(): void {
    this.#querys$ = this.router.queryParamMap.subscribe(querys => {

      if ( !querys.get('value') ) return;

      console.log('PARAMETRO:', querys.get('value'));
    });
  }

ngOnDestroy(): void {
    this.#querys$.unsubscribe();
}

Marcel Marin

student•

No es necesario hacer unsubscribe en este caso ya que angular/router automaticamente aplica un unsubscribe...

Todo lo que usemos directamente de @angular tiene por defecto un unsubscribe

Johan Mateo Franco Vargas

student•

Esta clase estuvo interesante, comparto mi solución, basicamente realize el mismo procedimiento, para categorias

ya que tenemos una forma de recibir el id del producto:

Cree una variable

<productId: string | null = null;>

luego cada vez que se inicialize, recibe los parametros con usa subscripción y obtiene el producto.

<ngOnInit(): void {
    this.router.paramMap
      .pipe(
        switchMap(params => {
          this.categoryId = params.get('id');
          if (this.categoryId) {
            return this.productService
            .getByCategory(this.categoryId, this.limit, this.offset)
          }
          return [];
        })
      )
      .subscribe(
        data =>{
          this.products = data;
        }
      )
      this.router.queryParamMap.subscribe(pararms =>{
        this.productId = pararms.get('product');
        console.log(this.productId);
      })
  }>

y despues en el html de la categoria le enviamos el properti binding productoId para enviarle el productId:

<@Component({
  selector: 'app-category',
  template: '<app-products [productId]="productId" [products]="products"></app-products>',
  styleUrls: ['./category.component.scss']
})>

Jimmy Buriticá Londoño

student•

Hasta ahora muy claro el tema de las rutas en Angular.

David Mijael Sánchez Quispe

student•

El resumen de la clase: sharedable page.

Juan Luna

student•

Solo hay un problema en todo esto, no sé si se arregla más adelante. Cuando accedes a ver el detalle de un producto y cierras la ventanita lateral que muestra ese detalle, no puedes volver a clickar en el mismo producto, porque claro el @input set, está esperando cambios, y no hay ningún cambio, ¿no se debería, poner el valor a null, el productId, cuando cerremos la ventanita?

Carlos Dugarte

student•

Qué plugin usas para formatear el código? @NicolasMolina

Andres Chavez

student•

Usa Prettier, para formatear nomás tienes que hacer un comando y listo

alt + shift + f

Luis Enrique Partida Vega

student•

Al agregar la lectura de query params desde categorías, el botón de ver detalle en el componente product, redirecciona a home y agrega los query params, ¿hay manera de actualizar query params sin cambiar la ruta?

Nicolas Molina

teacher•

Hola, si realmente ese debería ser el comportamiento que se debe lograr que al hacer clic al detalle muestre el panel a la derecha y no vaya al home, tal vez hay algún problema en el path de tus rutas.

Si quieres nos puedes compartir tu proyecto en GitHub y los vemos.

export class CategoryComponent implements OnInit {
  ...
  productId: string | null = null;

  constructor(
    private route: ActivatedRoute,
    ...
  ) {}

  ngOnInit(): void {
    ...
    this.route.queryParamMap.subscribe((params) => {
      this.productId = params.get('product');
    });
  }
  ...
}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {switchMap} from 'rxjs/operators'

import {ProductsService} from '../../services/products.service';
import {Product} from '../../models/product.model';

@Component({
  selector: 'app-category',
  template: `<app-products
[productId]="productId"
[products]="products"
(loadMore)="loadMore()"></app-products>`,
  styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {

  categoryId: string | null= null;
  products: Product[] = [];
  limit = 10;
  offset = 0;
  productId: string | null = null;

  constructor(
    private route: ActivatedRoute, //leer parametros desde el routing
    private productsService: ProductsService
    ) { }

  ngOnInit(): void {
    this.route.paramMap
    .pipe(
      switchMap((params) =>{
        this.categoryId = params.get('id');
        if (this.categoryId){
          return this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
        }
        return[];
      })
    ).subscribe((data)=>{
      this.products = data;
      this.route.queryParamMap.subscribe((params) => {
        this.productId = params.get('product');
      });
    });
  }

  loadMore(): void {
    if (this.categoryId){
    this.productsService.getByCategory(this.categoryId, this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
    }
  }
}

import { Subscription }       from 'rxjs/internal/Subscription';

#querys$ = new Subscription();

ngOnInit(): void {
    this.#querys$ = this.router.queryParamMap.subscribe(querys => {

      if ( !querys.get('value') ) return;

      console.log('PARAMETRO:', querys.get('value'));
    });
  }

ngOnDestroy(): void {
    this.#querys$.unsubscribe();
}

<ngOnInit(): void {
    this.router.paramMap
      .pipe(
        switchMap(params => {
          this.categoryId = params.get('id');
          if (this.categoryId) {
            return this.productService
            .getByCategory(this.categoryId, this.limit, this.offset)
          }
          return [];
        })
      )
      .subscribe(
        data =>{
          this.products = data;
        }
      )
      this.router.queryParamMap.subscribe(pararms =>{
        this.productId = pararms.get('product');
        console.log(this.productId);
      })
  }> 

Lectura de Parámetros URL en Angular para Filtrado y Navegación

Manejo de rutas

Angular Router y Programación Modular en eCommerce

Implementación de Routing en Angular: Creación de Componentes y Páginas

Configuración de rutas y refactorización de componentes en Angular

Renderizado Dinámico de Productos por Categoría en Angular

Optimización de suscripciones con SwitchMap en Angular

Navegación Dinámica en Angular: Uso de Router Link y Router Active

Implementación de página 404 personalizada en aplicaciones web

Creación de Página de Detalle de Producto en eCommerce

Lectura de Parámetros URL en Angular para Filtrado y Navegación

Módulos

Optimización de JavaScript con Code Splitting en Angular

Programación Modular en Angular: Módulos y Lazy Loading

Vistas Anidadas y Programación Modular en Angular

Creación de un Módulo CMS con Enrutamiento en Angular

Transformación de Carpeta a Módulo en Angular

Creación y uso de módulos compartidos en Angular

Precarga de módulos

Precarga de Módulos en Angular para Mejorar el Rendimiento

Precarga de Módulos en Angular: Estrategias Personalizadas

Precarga de Módulos con QuickLink y Observable API en Angular

Guardianes

Protección de rutas en Angular con guardianes

Redirección y Logout en Aplicaciones Web con Tokens

Gestión Reactiva de Sesiones en Angular

Creación de Guardianes en Angular para Control de Acceso por Rol

Implementación de Guardianes en Angular para Controlar Salida de Rutas

Deployment

Despliegue de Aplicaciones Angular en Netlify paso a paso

Despedida

Routing avanzado en Angular: rutas, módulos y seguridad