How to router.navigate to same route in Angular 4 and catch the same event?

Question

Okay, I have two use cases for my question here:

1. 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 does this.router.navigate([this.routeParams.lang, 'register']); and it's all good, this opens up a modal in the constructor (or ngOnInit, anyways) with ($('#modalRegister') as any).modal('show');.

   It all works good, but if I close the modal, the route is still /en/register/ (yeah I can make it go to /en but see the use case #2 before you suggest this), so when I click the button, it doesn't do anything. Neither the constructor or ngOnInit are being called, not even route.params.subscribe() or route.url.subscribe() (which I think they should...).

2. In the same application, I have a button that does a search and centers some markers in a map (in /en/search/blah). That's all good if I'm in the index page or if I change the search query. However, if the user drags the map somewhere else and wants to have the same markers centered again, I also do this.router.navigate(['search', this.searchQuery]); and if it ends up being the same route (click the search button twice, for instance) it doesn't do anything.

While I agree it's good so the components don't get recreated if the URL hasn't changed, this is a bad design because in UI-router you could do the same thing and it'd work (as far as I can remember).

So, in Angular 4, how do I run the same code in the constructor/ngOnInit of the route's component when the same URL is being told to be navigated to? or how do I detect if the URL is the same and act accordingly? (although I still think it's bad design, but anyway...).

Any advice is greatly appreciated. Thanks!

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

View more solutions

Comments

[Anurag pareek]

It's not working, Angular track it as a unmatch URL and redirect to default route

[Anurag pareek]

Yes, its really look ugly... But works for me. Is there any other solution you get?

[AuroMetal]

Good shout! In my case, I needed a parameter: this.router.navigate(['/path', param]).then(() => { window.location.reload(); });

[Lee Merlas]

This answer just saved me. Thanks!!

[Rajkumar M]

This this.router.navigate(['path']).then(()=> {window.location.reload();}); approach helped me and worked for me. Thanks.