Pregunta Cómo llamar a una función en cada cambio de ruta en angular2


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

}

Aquí quiero llamar a una función de main.ts en cada cambio de ruta y cómo puedo hacer eso. ¿Puede alguien ayudarme por favor? Gracias. Mi mainapp.ts,

    export class Mainapp {

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

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

Quiero llamar a este cambio de Rutas () por cada cambio de ruta y ¿cómo puedo hacer eso? ¿Alguien puede ayudarme?


11
2018-02-25 07:44


origen


Respuestas:


Puedes llamar activate método de principal router-outlet Me gusta esto

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

que llamará cada vez que la ruta cambie


17
2018-02-25 07:55



Puedes suscribirte al NavigationEnd evento de enrutador, y recuperar la URL con urlAfterRedirects método.

  • Te recomiendo que uses el urlAfterRedirectsporque parece que necesitas showAfterLogin condicionalmente.

  • Digamos que estás redirigiendo /test-page a /; y confías en router.url. En ese caso, la aplicación ya será redirigida a / pero router.url volvería /test-page y aquí el problema proviene ('/test-page' != '/')

Simplemente, haga los siguientes cambios en su 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;
                    }
                });
    }
}

1
2018-02-25 08:21



Puede llamar a la directiva en Rutas como a continuación:

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

Su componente AuthGuard es como el siguiente en donde puso su código:

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;
  }
 }

Debe importar el componente AuthGuard en el archivo app.module.ts y debe proporcionar en los proveedores:

app.module.ts:

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

1
2018-03-16 05:37