1

Currently i trying to do a SPA using Angular 9. I made a module called products with this route localhost:4200/products and for find a specified product i using this route http://localhost:4200/products/(number_id_product)

I thought to implement this component for each time i need to see a product. My problem is when i go to another product from the current product page using a link with [routerlink], (http://localhost:4200/products/1 to http://localhost:4200/products/2 )the url changes but the content page doesnt changes and keep the same info of the last product.

I dont know what is going on with the [routerlink] redirection

my code .ts

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/shared/models/product';
import { ActivatedRoute } from '@angular/router';
import { ProductsService } from 'src/app/shared/services/products.service';

@Component({
  selector: 'ec-product-description',
  templateUrl: './product-description.component.html',
  styleUrls: ['./product-description.component.css']
})
export class ProductDescriptionComponent implements OnInit {

  id: string;
  product: Product

  constructor(private route: ActivatedRoute, private service: ProductsService) { }

  ngOnInit(): void {

    this.id= this.route.snapshot.paramMap.get('id')
    //get products/id

    this.service.getProduct(this.id)
      .subscribe(prod=>{
        console.log(`Prod ↓ `)
        console.log(prod)
        this.product=prod
        })

  }

}

my code html

<div class="container-product">
 <h1>{{product.title}}</h1>
 <img mat-card-image [src]="product.thumbImage">
 <span class="product-descrp">{{product.description}}</span>
 <span [routerLink]="['','products','another_id_product']">See another product!</span>

</div>
k16style
  • 133
  • 1
  • 2
  • 8

2 Answers2

1

Both URLs in question (i.e. /products/1 and /product/2) match the same path definition /products:id. Therefore, when moving from /products/1 to /products/2, the matches path stays the same, which means that the component used by the router stays the same. By default, the component is NOT destroyed and re-rendered.

If you expect your component to switch between different product IDs, you should refactor it so it doesn't only read the route parameters once, as you do in ngOnInit:

this.id= this.route.snapshot.paramMap.get('id')

Instead, you should observe the changes emitted by the router, and react to them accordingly.

    this.route.paramMap.pipe(
      map(paramMap => paramMap.get('id')),
      switchMap(id => this.service.getProduct(id)),
    ).subscribe(prod => {
      console.log(prod)
      this.product = prod
    })

Now whenever paramMap changes, id will be extracted from it, and a request will be made via the service getProduct method. Once the response arrives, the function passed into the subscribe method is run and this.product updates.

Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
-1

When you change the route programmatically from product/1 to product/2, the component doesn't get reinstantiated (Good thing, isn't it). So ngOnInit will not fire again. That means your this.id won't change, nor it would it would make any getProduct() call.

To fix this, you need to subscribe to the params to listen to any changes to it.

ngOnInit() {
   this.route.paramMap.subscribe((params: ParamMap) => {
     this.id = params.get('id');
     this.service.getProduct(this.id).subscribe(prod=>{
       ...
     });
   });
}
Nayak
  • 742
  • 6
  • 7