A ProductDetailComponent reads the product ID in ngOnInit using this.route.snapshot.paramMap.get('id'). The user navigates from /products/1 to /products/2 by clicking a 'Next Product' link. What happens to the component and why?

typescript export class ProductDetailComponent implements OnInit { product: Product;

ngOnInit(): void { const id = this.route.snapshot.paramMap.get('id'); // reads '1' on first load this.productService.getProductById(id).subscribe(p => this.product = p); } }