Search code examples
javascriptauthenticationangularnavigationreload

Reload a navigation component after login redirects to another component Angular 2


I've a nasty problem to solve in my angular 2 webapp.

Let's say that I have this template in the app.component

<main-menu></main-menu>
<router-outlet></router-outlet>

Now the default component that gets injected inside the router-outlet tag is the login component and so far so good.

The problems come when I hit the login button. The back-end api returns a user_role, and depending from it the main-menu must change (some links can be seen, others not etc.) and when the login is successful, it navigates to another third component.

The problem is that the constructor of the main-menu component and its hooks like ngAfterViewInit are not called a second time (since we're not navigating toward it but toward a third component) and this is a problem since I need the logic inside there to be reloaded.

I think I could solve this through child-routing (login injects menu, menu injects everything else), but is there a quicker way to solve it?


Solution

  • As I said it's possible to solve this problem with child routing (and it's what I did), but actually the simplest way was to do a location.reload() when the login button is pressed but visually it's not as good as having a nested route!