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