fix(angular): use a parametrised route to avoid conflict with routing

thanks @dhayab

Author: Haroenv

angular-instantsearch/using-instantsearch/src/app/app.routes.ts

@@ -4,5 +4,5 @@ import { HomeComponent } from './home/home.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
-  { path: 'product', component: ProductComponent },
+  { path: 'product/:objectID', component: ProductComponent },
 ];

angular-instantsearch/using-instantsearch/src/app/home/home.component.html

@@ -5,7 +5,7 @@
     <ul>
       @for (hit of hits; track hit.objectID) {
       <li>
-        <a routerLink="/product" [queryParams]="{ objectID: hit.objectID }">
+        <a routerLink="/product/{{ hit.objectID }}">
           {{ hit.name }}
         </a>
       </li>

angular-instantsearch/using-instantsearch/src/app/product/product.component.html

@@ -7,7 +7,7 @@ <h1>{{ hit.name }}</h1>
   <h2>Related Products</h2>
   <ul>
     <li *ngFor="let item of relatedItems">
-      <a routerLink="/product" [queryParams]="{ objectID: item.objectID }">
+      <a routerLink="/product/{{ item.objectID }}">
         {{ item.name }}
       </a>
     </li>

angular-instantsearch/using-instantsearch/src/app/product/product.component.ts

@@ -26,14 +26,7 @@ export class ProductComponent {
   constructor(
     private route: ActivatedRoute,
     private InstantSearchService: InstantSearchService
-  ) {
-    const objectID = route.snapshot.queryParamMap.get('objectID');
-    if (!objectID) {
-      throw new Error('objectID is required');
-    }
-
-    this.replaceWidgets(objectID);
-  }
+  ) {}
 
   replaceWidgets(objectID: string) {
     if (this.objectID === objectID) {
@@ -58,7 +51,7 @@ export class ProductComponent {
   }
 
   ngOnInit() {
-    this.route.queryParams.subscribe((params) => {
+    this.route.params.subscribe((params) => {
       this.replaceWidgets(params.objectID);
     });
   }