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

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()
}

I know this is a little late but I just ran into the same issue and found a solution. You are using this.route.snapshot.params to get the id parameter. Per the Angular documentation, only use snapshot when your component instance will never be reused. Snapshot only provides the initial value of the route parameter map and does not get updated when the component is reused. This means if you route to a component by id and then (while displaying that component) try to route to a new instance of the same component with a different id, the initial component will be reused but the data will not update because ngOnInit() is not called a second time.

To fix the issue you must change;

this.cat = this.route.snapshot.params['cat'];

To use this format;

ngOnInit() {
  this.cat$ = this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>
      this.itemsSrv.getItems(params.get('id')))
  );
}

The this.route.paramMap is returned from an Observable which

"implies that the route parameter map can change during the lifetime of this component".

You will probably have to modify other parts of your code to work with the Observable (cat$), but since I can only see part of your code I can't advise on other changes. In the documentation below there is a project file (hero-detail.component.ts) at the end of Milestone 3 showing how this works.

You can read the official documentation here;

Angular2+ Observable paramMap and component reuse

Hope this helps and happy coding!

I think this is the best solution

constructor(route:ActivatedRoute) {
 route.params.subscribe(val => {
 // put the code from `ngOnInit` here
  });
}

The router only destroys and recreates the component when it navigates to a different route. When only route params or query params are updated but the route is the same, the component won't be destroyed and recreated. Happy to hear if helped.

When you are navigating to the same component, Angular is not going to re-fire your ngOnInit() method. To get your code working, you will need to work with a version of the route parameters that are an observable and subscribe to changes on that. Make sure you read over the Angular Docs about routing. They have a bunch of helpful information in there.

ngOnInit(){
    this.route.paramMap
        .switchMap(params => this.itemsSrv.getItems(params.get('cat')))
        .subscribe(data => {
            this.items=data;
        });
}

You'll need to make sure that you unsubscribe from this subscription when you navigate away from this component. Here is a discussion on the best practice on how to do it.

I have also face this problem while doing my project the best to get rid of that error is use subscribe for route and than use Ondestroy interface for unsubscribe an event

    ngOnInit{
       this._router.params.subscribe(param =>{
            // write some code
           let cat=this._router.snapshot.paramMap.get('cat');
          });
}

// after that you must unsbscribe

    ngOnDestroy(){
    }

 ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        //Do something here
    });

    //Or

    this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
 }

The following code works when we created a route with the parameter to access data from API sometime user click on the same route a second time with a different parameter and our ngOnint does not call our function the second time which we try to call likes this

   ngOnInit() {
        this.loadUserDetail(this.id);
         // OR
        this.loadUserDetail();
     }
loadUserDetail(id){
        return this.http.get(this.apiUrl+'/'+ id).subscribe(
            (res: any) => {
                  this.products = res['data'];
                  this.seoService.updateTitle(this.products[0]['title']);
                  this.seoService.updateOgUrl(this.products[0].keyword);
                
              
   this.seoService.updateDescription(this.products[0].description);
                  console.log(this.products);
              },
            (error:HttpErrorResponse) => {
              console.log('Error in Fetching  Menu');
              this.products = error.error;
              console.log(this.products);
            }
          );
     }

Sorry for Bad English and explanation

It happens because angular is reusing that component. Just stop the reusing functionality with below code and it'll work fine.

constructor(private router: Router) {
    // this is for routerLink on same component when only queryParameter changes
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

Version: Angular: 14.1.0

Assume you are redirecting to below component for different URLs with different query parameters. Just setting one property on router should work for you.

@Component({
  selector: 'app-attendance',
  templateUrl: './attendance.component.html',
  styleUrls: ['./attendance.component.css']
})
export class AttendanceComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit(): void {

        this.router.onSameUrlNavigation = 'reload';

    }
    
}

If you trying to route to the same Component with different route param. This worked for me.

 getConsingmentwithId(id: number){
    this.router.navigate(['component', id], {relativeTo: this.route.parent});
  }