Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call a function on every route change in angular2

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 on every route change and how can i do that.Can anyone please 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 every route change and how can i do that?Can anyone please help me.

like image 251
Daniel Avatar asked Feb 25 '17 07:02

Daniel


People also ask

Is ngOnDestroy called on route change?

ngOnDestroy doesn't get called because some components do not get destroyed when navigating to a different route.

How does Angular determine routing change?

Steps to detect route change in Angular application Urls. Import Router, Event, NavigationStart, NavigationEnd, NavigationError from '@angular/router'. And inject router in the constructor. Subscribe to the NavigationStart, NavigationEnd, NavigationError events of the router.

What is route reuse strategy in Angular?

BaseRouteReuseStrategylink This base route reuse strategy only reuses routes when the matched router configs are identical. This prevents components from being destroyed and recreated when just the fragment or query parameters change (that is, the existing component is reused).


1 Answers

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 */}     });   } 
like image 106
Pardeep Jain Avatar answered Sep 21 '22 05:09

Pardeep Jain