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

router events angular 6

Question

Mi modulo.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 desde main.ts en cada cambio de ruta y cómo puedo hacer eso. ¿Puede alguien ayudarme? Gracias. Mis 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 () para cada cambio de ruta y ¿cómo puedo hacer eso? ¿Puede alguien ayudarme?

Answer 1

Puede consultar: NgRx Router

Capture todas las acciones ''Ir'' en los efectos ngrx para hacer cosas justo antes de que cambie la ruta, o en el reductor de esta acción para llamar a una función después de que cambie la ruta.

Answer 2

Puede llamar al método de activate desde el router-outlet principal router-outlet esta manera.

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

que llamará cada vez que la ruta cambiará.

Actualización -

Otra forma de lograr lo mismo es suscribirse a los eventos del enrutador, incluso si puede filtrarlos en función del estado de navegación, ya sea al inicio y al final, por ejemplo:

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 */}
    });
  }

Answer 3

Puede llamar directivas en Rutas como a continuación:

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

Tu componente AuthGuard es como abajo donde pones tu 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,
    ........
],

Answer 4

Puede suscribirse al evento NavigationEnd del enrutador y recuperar la URL con el método urlAfterRedirects .

• Te recomiendo que uses los urlAfterRedirects , porque parece que necesitas showAfterLogin condicionalmente.

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

Simplemente, realice 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;
                    }
                });
    }
}