Router Navigate does not call ngOnInit when same page

You can inject the ActivatedRoute and subscribe to params

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.

An alternative way to force the component to be recreated is to use a custom reuse strategy. See also Angular2 router 2.0.0 not reloading components when same url loaded with different parameters? (there doesn't seem to be much information available yet how to implement it)

You could adjust the reuseStrategy on the Router.

constructor(private router: Router) {    // override the route reuse strategy    this.router.routeReuseStrategy.shouldReuseRoute = function() {        return false;    };}

Angular 9

I have used the following and it worked.

onButtonClick() {    this.router.routeReuseStrategy.shouldReuseRoute = function () {        return false;    }    this.router.onSameUrlNavigation = 'reload';    this.router.navigate('/myroute', { queryParams: { index: 1 } });}