angular 7 routing to same component but different param not working

Question

I have 2 router outlets: sidebar and the default one.

 {path: 'motor/:id', component: MotorComponent}

From the sidebar outlet i have some router links to the default router outlet that target the same component (MotorComponent) but different param.

this.router.navigate(['./', {outlets: {primary: ['motor', 
id]}}]);

If i click on one, the respective component is loaded but if i click on another router link the correct component is not loaded. The param changes in the url.

I read it is a common problem. I tried with a reuse strategy but i don't think it was well implemented, nothing happened.

I would like to click on different router links that target the same component but different params and the component would load even if it is the same component.

This is my ngOninit where i subscribe to route params, save that id and then fetch my new object from the service.

motor: MotoarePrincipale;
id: number;

ngOnInit() {
this.route.params.subscribe(
  (params: Params) => {
    this.id = +params['id'];
  }
);
this.masinaService.getMotorByMotorId(this.id).subscribe(data => {
  this.motor = data;
});

Answer 1

for angular 7(I tried only on this version) you could use in your component the route reuse strategy:

constructor(private routerR: Router) {

    // this is for routerLink on same component when only queryParameter changes
    this.routerR.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };
  }