webentwicklung-frage-antwort-db.com.de

So rufen Sie eine Funktion bei jeder Routenänderung in angle2 auf

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

}

Hier möchte ich eine Funktion von main.ts bei jeder Routenänderung aufrufen und wie kann ich das tun. Kann mir jemand bitte helfen.Vielen Dank .

    export class Mainapp {

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

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

Ich möchte diese changeofRoutes () für jede Routenänderung aufrufen und wie kann ich das tun? Kann mir bitte jemand helfen?.

angulartypescriptangular2-routing
18
Daniel

sie können die activate-Methode wie folgt von main router-outlet aus aufrufen

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

das wird jedes Mal aufgerufen, wenn sich die Route ändert

28
Pardeep Jain

Sie können das Ereignis NavigationEnd des Routers abonnieren und die URL mit der Methode urlAfterRedirects abrufen.

  • Ich empfehle Ihnen dringend, die urlAfterRedirects zu verwenden, da es scheint, dass Sie showAfterLogin bedingt benötigen.

  • Angenommen, Sie leiten /test-page zu / um. und Sie verlassen sich auf router.url. In diesem Fall wird die App bereits zu / umgeleitet, aber router.url würde /test-page zurückgeben und hier kommt das issue ('/test-page' != '/').

Nehmen Sie einfach die folgenden Änderungen in Ihrem Konstruktor vor:

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

Sie können die Direktive in den folgenden Routen aufrufen:

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

Ihre AuthGuard-Komponente ist wie unten, wo Sie Ihren Code eingeben:

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

Sie sollten die AuthGuard-Komponente in die Datei app.module.ts importieren und in Providern Folgendes bereitstellen:

app.module.ts: 

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

Sie können referenzieren: NgRx Router

Fangen Sie alle 'Go'-Aktionen in ngrx-Effekten ab, um nur vor die Route zu ändern, oder im Reducer dieser Aktion, um eine Funktion nach aufzurufen, nachdem die Route geändert wurde. 

0
kg11