Estoy trabajando en un proyecto de comercio electrónico, en la página de la tienda cuando el usuario hace clic en el botón Ver más en un producto, lo envío a la ruta para la página de detalles del producto con la identificación del producto con él.
<a [routerLink]="['/product-details', product.id]">View More</a> cuando ingrese a la página del producto, muéstrele en los detalles del producto 4 productos para la misma marca, así que tengo una API que envío el brand_id para este producto y devuelve aleatoriamente 4 productos para esta marca y cuando hace clic en el producto de los 4 productos debe ir a la página en la que se encuentra actualmente pero con una identificación de producto diferente como esta
<a [routerLink]="['/product-details', moreProduct.id]">View More</a>el problema es que la URL se cambia con la nueva identificación, pero el contenido de la página no cambia al nuevo producto hasta que vuelvo a cargar la página, ¿cómo puedo solucionar esto, por favor?
Cuando necesite usar el componente Angular con parámetros de ruta que se pueden cambiar dentro del componente en sí, debe mover la lógica que depende de los parámetros de ruta para que se llame dentro de la suscripción de ActivatedRoute.paramMap observable, para que se llame cada vez que el Se han cambiado los parámetros.
Prueba lo siguiente:
constructor(private activatedRoute: ActivatedRoute, ....) {} ngOnInit(): void { this.activatedRoute.paramMap .subscribe((params) => { const productId = params.get('PRODUCT_ID_PARAM_NAME'); // Get the related products here, or any other logic that depends on the params }); }Use el siguiente código en su constructor. Evitará que angular reutilice el componente y, en su lugar, angular lo recreará.
this.router.routeReuseStrategy.shouldReuseRoute = function () { return false; };