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.
ngOnDestroy doesn't get called because some components do not get destroyed when navigating to a different route.
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.
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).
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.
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 */} }); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With