Angular 6 : "reloading" same page when navigate to same route with different param

Angular 6 : "reloading" page when navigate to same route with different params

app-routing.module.html

const routes: Routes = [

  { path: 'detail/:id', component: DetailComponent },  

] ;

detail.component.html

<button (change)="gotoDetailPage(record.ID)" >{{record.Name}}</button>

detail.component.cs

import { Router } from '@angular/router'; 



constructor(private router: Router) {

this.router.routeReuseStrategy.shouldReuseRoute = function(){

return false;

} 

}





ngOnInit() {      

    //To get id's value, e.g., detail/123 

    const id = +this.route.snapshot.paramMap.get('id');

    //To get querystring id's value, e.g., detail?id=123 

    //const id = +this.route.snapshot.queryParamMap.get('id'); 

    console.log(id)

  }







gotoDetailPage(id)

{    

this.router.navigate(['/detail', id]);    

}

  

Hope this will help you and save your time.

Enjoy !!!

:)