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

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.