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

Question

Ok, I have two use cases for my question:

• I am working on an application that has a route /en/register . Everything works well when I am at the root and I click on the button that makes this.router.navigate([this.routeParams.lang, 'register']); , and all this is good, it opens the modal constructor (or ngOnInit, anyways) with ($('#modalRegister') as any).modal('show'); .

  Everything works fine, but if I close the modal, the route is still /en/register/ (yes, I can get it to go to /en , but look at usage example # 2 before suggesting this), so when I click the button she does nothing. Neither the constructor nor ngOnInit are called, not route.params.subscribe () or route.url.subscribe () (which I think they should ...).

• In the same application, I have a button that searches and centers some markers on the map (in /en/search/blah ). This is all good if I'm on the index page or if I change the search query. However, if the user drags the map somewhere else and wants to center the same markers again, I also do this.router.navigate(['search', this.searchQuery]); , and if it ends with the same route (for example, double-click the search button), this does not do anything.

Although I agree that the components will not be recreated if the URL has not changed, this is a bad design because in the UI router you can do the same and it will 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 component when the same URL is sent for navigation? or how to determine if the url matches and act accordingly? (although I still think this is a bad design, but anyway ...).

Any advice is appreciated. Thanks!

Answer 1

When I needed to “reload” the current constructor of the component and the ngOnInit function, the only solution I found was a kind of workaround:

I used the fact that "this.router.navigate" returns a promise. So I moved to another place and returned. This is a little ugly, but it works and the user interface is not affected:

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

Hope this helps.

Answer 2

In case 1,

Why are you moving to a new route to open a modal. Just do it on the same route with a function call. If you want to switch to a new route, you can call this.router.navigate("/") again in modal closure.

In case 2, Hope this works.

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

Answer 3

I am using this workaround

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

Answer 4

Just add the dummy parameter to the end of the route / en / register / jk 2h4-42hj-234n2-234dfg or specify a query parameter like / en / register? val = jk2h4-42hj-234n2-234dfg

change the value of the parameter when calling the same route. Therefore, the browser knows that the URL change and the Angualr component begin to work from the full life cycle.