angular 5 routing to same component but different param, not working

I have angular 5 basic beginner level appthere are just 5 components

my routing and links look like this

//copied from app.module.tsconst appRoutes:Routes = [  {path:'',component:HomeComponent},  {path:'items/:cat',component:ItemsComponent},  {path:'itemdetail/:id',component:ItemdetailComponent},  {path:'settings',component:SettingsComponent},];//copied from navbar.component.html<ul><li><a [routerLink]="['/']">Home</a></li><li><a [routerLink]="['/items/8']">Rashion</a></li><li><a [routerLink]="['/items/2']">Vegitables</a></li><li><a [routerLink]="['/items/3']">Fruits</a></li><li><a [routerLink]="['/items/7']">Other</a></li><li><a [routerLink]="['/items/5']">Sweets</a></li><li><a [routerLink]="['/settings']">Settings</a></li>          </ul>//copied from items.component.tsngOnInit(){    this.cat = this.route.snapshot.params['cat'];    this.itemsSrv.getItems(this.cat)            .subscribe((data)=>{                this.items=data;            });}

links only work if it is going to different component,
means I can navigate from home page to /items/2
but when I am in items component I can navigate to /items/any-parameter
although from Items i can go to home or settings component.
in short it is now working to navigate to same component even if parameter is different.

I noticed one thing, URL is getting changed but page content is same as old page not reloading new url :(