11

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!

3
  • Whoever -1'd it, at least give a PROPER reason to do so, else you're just being unhelpful.
    – DARKGuy
    Sep 24, 2017 at 6:05
  • Do you know about Location? angular.io/api/common/Location It should handle this for you
    – Z. Bagley
    Sep 27, 2017 at 20:11
  • @Z.Bagley thanks for your suggestion, but noting from what Location does, it seems it's similar to location.reload() and similar, which is not what I'm looking for :P I wanted to run the same events in the current iteration, not reload the page :(
    – DARKGuy
    Oct 5, 2017 at 5:30

4 Answers 4

10

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.

1
  • Yes, its really look ugly... But works for me. Is there any other solution you get? Jan 16, 2018 at 12:25
3

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

}
2

i use this workaround

this.router.navigate(['path']).then(()=>  {window.location.reload();});
3
  • 1
    Good shout! In my case, I needed a parameter: this.router.navigate(['/path', param]).then(() => { window.location.reload(); });
    – AuroMetal
    Feb 27, 2018 at 10:26
  • 1
    This answer just saved me. Thanks!!
    – Lee Merlas
    Jul 10, 2020 at 7:52
  • This this.router.navigate(['path']).then(()=> {window.location.reload();}); approach helped me and worked for me. Thanks.
    – Rajkumar M
    Dec 15, 2020 at 12:18
1

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.

1
  • It's not working, Angular track it as a unmatch URL and redirect to default route Jan 16, 2018 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.