How to call a function every time you change a route in corner2

Question

My module.ts,

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule,Router } from '@angular/router'; import { AppComponent } from './crud/app.component'; import { Profile } from './profile/profile'; import { Mainapp } from './demo.app'; import { Navbar } from './header/header'; // import {ToasterModule, ToasterService} from 'angular2-toaster'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule,FormsModule, ReactiveFormsModule , RouterModule.forRoot([ { path: '', component:AppComponent}, { path: 'login', component:AppComponent}, { path: 'profile', component:Profile} ]) ], declarations: [ AppComponent,Mainapp,Navbar,Profile ], bootstrap: [ Mainapp ] }) export class AppModule { } 

Here I want to call a function from main.ts every time the route is changed and how I can do it. Can i help me. Thanks. My mainapp.ts,

  export class Mainapp { showBeforeLogin:any = true; showAfterLogin:any; constructor( public router: Router) { this.changeOfRoutes(); } changeOfRoutes(){ if(this.router.url === '/'){ this.showAfterLogin = true; } } } 

I want to call this changeofRoutes () for each route change, and how can I do this? Can anybody help me.

Answer 1

you can call the activate method from the main router-outlet , like this

 <router-outlet (activate)="changeOfRoutes()"></router-outlet> 

which will call every time a route is changed

Answer 2

You can subscribe to the router's NavigationEnd event and retrieve the URL using the urlAfterRedirects method.

• I highly recommend you use urlAfterRedirects because it seems like you need showAfterLogin conditionally.

• Let's say you redirect /test-page to / ; and you rely on router.url . In this case, the application will already be redirected to / , but router.url will return /test-page , and here the problem will appear ( '/test-page' != '/' ).

Just make the following changes to 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; } }); } } 

Answer 3

You can call the directive in Routes, as shown below:

 { path: 'dashboard', component: DashboardComponent , canActivate: [AuthGuard] }, 

Your AuthGuard component is similar to the one 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 need to import the AuthGuard component into the app.module.ts file and provide the suppliers with:

app.module.ts:

 ......... Your code.......... import { AuthGuard } from './_guards/index'; ..........Your code.............. providers: [ AuthGuard, ........ ], 

Answer 4

You can contact: NgRx Router

Catch all the “Go” actions in ngrx effects to do things immediately before changing the route, or in the reducer of this action to call a function after changing the route.