No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
0 Hrs
31 Min
47 Seg

Parametros URL

9/25
Recursos

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.

Aportes 8

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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!

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

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

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

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

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

El resumen de la clase: sharedable page.