How To Router.navigate To Same Route In Angular 4 And Catch The Same Event?

Okay, I have two use cases for my question here: I'm working on an application which has a /en/register route. It all works good when I'm at the root and I click a button that doe

Solution 1:

When I needed to "reload" the current component's constructor and ngOnInit functions, the only solution I found was kind of a workaround:

I used the fact that "this.router.navigate" returns a promise. So I navigated somewhere else, and returned. It's a bit ugly but it works and the UI is not affected:

this.router.navigate(..[somewhere else]..)
    .then(()=>{this.router.navigate(..back..)})

Hope it helps.

Solution 2:

For case 1,

Why do you navigate to a new route just to open a modal. Just do it being at the same route with a function call. If you want to move to a new route then you can again call this.router.navigate("/") in modal close event.

For case 2, Hope this will work.

currentSearchQuery: string;

ngOnInit() {
  this.route.paramMap
    .switchMap((params: ParamMap) => {
        this.currentSearchQuery = params.get('searchQuery');
        updateMarkers();
      });

}

Solution 3:

Just add dummy parameter at the end of the route /en/register/jk2h4-42hj-234n2-234dfg or query parameter like /en/register?val=jk2h4-42hj-234n2-234dfg

change the parameter value when calling the same route. So browser knows that URL change and Angualr component start to work from full life cycle.

Solution 4:

i use this workaround

this.router.navigate(['path']).then(()=>  {window.location.reload();});