How to call a function on every route change in angular2
you can call activate
method from main router-outlet
like this
<router-outlet (activate)="changeOfRoutes()"></router-outlet>
which will call every time when route will change.
Update -
Another way to achieve the same is to subscribe to the router events even you can filter them out on the basis of navigation state may be start and end or so, for example -
import { Router, NavigationEnd } from '@angular/router';
@Component({...})
constructor(private router: Router) {
this.router.events.subscribe((ev) => {
if (ev instanceof NavigationEnd) { /* Your code goes here on every router change */}
});
}
You can call directive in Routes like below:
{ path: 'dashboard', component: DashboardComponent , canActivate: [AuthGuard] },
Your AuthGuard component is like below where you put your code:
auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot,
RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)
{
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/home'], { queryParams: { returnUrl:
state.url }});
return false;
}
}
You should import AuthGuard component in app.module.ts file and should provide in providers:
app.module.ts:
......... Your code..........
import { AuthGuard } from './_guards/index';
..........Your code..............
providers: [
AuthGuard,
........
],
You can subscribe to the NavigationEnd
event of router, and retrieve the URL with urlAfterRedirects
method.
I strongly recommend you to use the
urlAfterRedirects
, because it seems that you need toshowAfterLogin
conditionally.Let's say, you're redirecting
/test-page
to/
; and you rely onrouter.url
. In that case the app will already be redirected to/
butrouter.url
would return/test-page
and here the issue comes ('/test-page' != '/'
).
Simply, make the following changes in your constructor:
export class Mainapp {
showBeforeLogin:any = true;
showAfterLogin:any;
constructor(public router: Router) {
this.changeOfRoutes();
this.router.events
.filter(event => (event instanceof NavigationEnd))
.subscribe((routeData: any) => {
if(routeData.urlAfterRedirects === '/') {
this.showAfterLogin = true;
}
});
}
}