web-dev-qa-db-fra.com

Comment appeler une fonction sur chaque changement de route dans angular2

Mon 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 { 

}

Ici, je veux appeler une fonction de main.ts sur chaque changement d’itinéraire et comment puis-je le faire.Est-ce que tout le monde peut s’aider, aidez-moi!

    export class Mainapp {

    showBeforeLogin:any = true;
    showAfterLogin:any;
    constructor( public router: Router) {
     this.changeOfRoutes();

     }
     changeOfRoutes(){
      if(this.router.url === '/'){
         this.showAfterLogin = true;
      }
     }
}

Je veux appeler ce changeofRoutes () pour chaque changement d'itinéraire et comment puis-je faire cela? Quelqu'un peut-il m'aider s'il vous plaît.

angulartypescriptangular2-routing
18
Daniel

vous pouvez appeler la méthode activate à partir du router-outlet principal comme ceci

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

qui appellera à chaque fois que la route changera

28
Pardeep Jain

Vous pouvez vous abonner à l'événement NavigationEnd du routeur et récupérer l'URL avec la méthode urlAfterRedirects.

  • Je vous recommande fortement d'utiliser la variable urlAfterRedirects, car il semble que vous ayez besoin de showAfterLogin sous condition.

  • Disons que vous redirigez /test-page vers /; et vous comptez sur router.url. Dans ce cas, l'application sera déjà redirigée vers /, mais router.url renverra /test-page et, ici, le issue come ('/test-page' != '/').

Simplement, apportez les modifications suivantes à votre constructeur:

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;
                    }
                });
    }
}
3
Burak Tasci

Vous pouvez appeler une directive dans Routes comme ci-dessous:

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

Votre composant AuthGuard est comme ci-dessous où vous avez mis votre 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;
  }
 }

Vous devez importer le composant AuthGuard dans le fichier app.module.ts et indiquer aux fournisseurs:

app.module.ts: 

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

Vous pouvez vous référer: Routeur NgRx

Attrapez toutes les actions 'Go' dans les effets ngrx pour faire des choses simplement avant la route change, ou dans le réducteur de cette action pour appeler une fonction après la route change. 

0
kg11