1

The behaviour we want for our site is that if a user clicks the menu link for the page (route) they're currently on, then the page (component) is reloaded. So any forms are reset etc.

I have been reading how this isn't the built in behaviour in Angular. I have been playing with a custom RouteReuseStrategy (examples such as How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2), and even without the complexity of that, there seems to be a fundamental issue with that approach. If I click the menu link for the current page, then none of the methods in my custom implementation of RouteReuseStrategy are called, even though they are all called as expected if I click a link to a different route. So this makes me think that no matter what code I put in my custom RouteReuseStrategy then this will never work, because it's not called if the routerLink is the current route.

I did also read that this same behaviour (resetting forms etc) should be accomplished by having some reset() method on the form component. This ends up with the same issue. Namely, what can I hook into to detect that the user has clicked a routerLink to the current route?

I have tried subscribing to router.events, which again triggers for any actual navigation between routes, but if the routerLink is the current one, then no router events are raised.

What can I hook into when a routerLink to the currently active route is clicked?

Tom
  • 129
  • 1
  • 4
  • 11

1 Answers1

0

1) you can do this by implementing a method that is called when the user clicks the menu item by checking what the current route is.

import { Router } from '@angular/router';
export class MyComponent implements OnInit {
    currentUrl;

    constructor(private router:Router) { ... }

    ngOnInit() {
        this.currentUrl = this.router.url;
    }

    onClickMenu($event) {
        const clickedRoute = $event.target.routerlink
        // check if they match, you may need to use a different comparisson
        // depending on relative/complete paths like index of or .contains
        if (clickedRoute === this.currentUrl) {
            // clear forms or force reload
            this.myForm.reset()
        } else {
            // route to clicked rout
        }
    }
}

2) another option, is to store a value representing the route in an attribute on the menut button, like value, and access it with event target, then manually route in a method based on the value

3) a slightly more complex way, but cleaner and better practice, would be to implement a route guard on those routes, and if the route guard does a check it can reload the forms if specific routes are clicked, read more here

FussinHussin
  • 1,718
  • 4
  • 19
  • 39
  • Thank you. I was hoping to avoid having to put special handling on the links. It feels that they should be able to stay as routerLinks. Option 3, using a guard, sounds great, but I have tested this and the guard is also not called when the routerLink is for the current route. Something is blocking all these events/processing and I still can't work out what it is, so I can hook into it. – Tom Oct 03 '17 at 17:09
  • okay, well I would post a separate question with your guard issues, errors, and set up, because that is a different question. I technically did answer your question. I'll see what I can do in the separate post – FussinHussin Oct 03 '17 at 17:12
  • Sorry, yes thank you. That was a quick end-of-day reply. I will try more with the guards tomorrow. I may just have something setup wrong. – Tom Oct 03 '17 at 18:17