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

Question

I have angular 5 basic beginner level app there are just 5 components

my routing and links look like this

//copied from app.module.ts
const 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.ts
ngOnInit(){
    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 :(

Answer 1

So, the best way is using subscribe for route:

userSubscription: Subscription;
...
ngOnInit() {
   this.userSubscription = this.route.params.subscribe(
            (params: Params) => {
                 //------ some code -----
   })
}

After that, you must to unsubscribe:

ngOnDestroy(): void {
        this.userSubscription.unsubscribe()
}