I am trying to redirect with routerlink to a category of products. But it only works the first time. Although the change is reflected in the url (http://localhost:4200/product/3), the page remains static the 2nd time a link is clicked.
Router is { path: 'product/:prodClass',component: ProductPageComponent }
Product Page
HERE Console.log just works the first time.
prodClass!: number;
submenusProduct: SubMenu []= [{
name: 'Wine',
url: '/product/4',
}, {
name: 'Liquor',
url: '/product/1',
},{
name: 'Beer',
url: '/product/2',
},{
name: 'Foods',
url: '/product/3',
}];
parentFilterSelects!:RequestBodyProduct;
parentFilterText!:string;
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;
console.log(this.prodClass);
}
Product Page HTML
<app-section [submenus] = 'submenusProduct' [isCustomerPage]="false"></app-section>
<div >
<div fxLayout.gt-sm="row" fxLayout.lt-md="column">
<app-product-filter fxFlex.gt-sm="25%" fxFlex.lt-md="25%" fxLayoutAlign="center none">
</app-product-filter>
<app-product-list [prodClass]='prodClass' fxFlex.gt-sm="75%" fxFlex.lt-md="75%" fxLayoutAlign="center none">
</app-product-list>
</div>
</div>
Section
<div *ngIf="!isCustomerPage" >
<mat-chip-list *ngFor="let submenu of submenus">
<mat-chip [routerLink]="[submenu.url]"> {{submenu.name}}</mat-chip>
</mat-chip-list>
</div>
Product List
public products: Product[] = [];
@Input() prodClass!: number;
constructor(private productService: ProductService, private filterService: FilterService) { }
public getProducts(requestBody: RequestBodyProduct): void {
this.productService
.getProducts(requestBody)
.subscribe((response: ResponseBody) => {
this.products = response.data;
});
}
ngOnChanges() {
let requestBody = new RequestBodyProduct(this.prodClass, 0, 0, 0, 0, 0, 'string');
this.getProducts(requestBody);
}
CodePudding user response:
Try this:
submenusProduct: SubMenu []= [{
name: 'Wine',
id: 4,
}, {
name: 'Liquor',
id: 1,
},{
name: 'Beer',
id: 2,
},{
name: 'Foods',
id: 3,
}];
In the Section:
<div *ngIf="!isCustomerPage" >
<mat-chip-list *ngFor="let submenu of submenus">
<mat-chip [routerLink]="['product', submenu.id]"> {{submenu.name}} </mat-chip>
</mat-chip-list>
</div>
More info in the Angular docs Link Parameters Array section of Routing & Navigation
And observe the route changes:
constructor(
.
.
private route: ActivatedRoute,
) {}
this.route.params.subscribe(params => {
console.log('params: ', params);
console.log('params.prodClass: ', params.prodClass);
})
// instead of: this.prodClass = Number(this.route.snapshot.paramMap.get('prodClass')) || 0;