web-dev-qa-db-fra.com

Comment obtenir les données de route actuelles dans Angular 2?

J'ai mis en place des itinéraires comme ci-dessous 

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login TTX'
    }
  },
  {
    path: 'list',
    component: ListingComponent,
    data: {
      title: ' TTX Home Page',
      module:'list'
    }
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
];

maintenant, quand je viens à '/list' route puis sur 'listing.component.ts' j'ai écrit ci-dessous le code

export class ListingComponent {

  public constructor(private router:Router) {
      //here how i can get **data** of **list** routes

  }
}
angularangular2-routing
13
Rituraj ratan
  public constructor(private route:ActivatedRoute, private router:Router) {
      console.log(route.snapshot.data['title']);
  }
12
Günter Zöchbauer

Pour Angular 4+

Si vous placez le code suivant dans les composants de niveau parent ou supérieur tel que AppComponent, cela ne fonctionnera pas. Il ne fonctionne que sur les composants enfants ou de niveau inférieur pour lesquels vous avez défini les données personnalisées de l'itinéraire:

 public constructor(private route:ActivatedRoute, private router:Router) {
      console.log(route.snapshot.data['title']);
  }

Ainsi, si vous souhaitez accéder aux données personnalisées de routage globalement à partir d'un composant parent ou supérieur pour accéder au changement des données personnalisées de routage, vous devez écouter les événements de routeur, en particulier les événements RoutesRecognized ou NavigationEnd. Je vais montrer deux procédures avec AppComponent avec deux événements:

Première approche: 

   export class AppComponent implements OnInit, AfterViewInit {

    constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

    ngOnInit() {
         this.router
        .events
        .filter(event => event instanceof NavigationEnd)
        .map(() => {
          let child = this.activatedRoute.firstChild;
          while (child) {
            if (child.firstChild) {
              child = child.firstChild;
            } else if (child.snapshot.data && child.snapshot.data['custom_data']) {
              return child.snapshot.data['custom_data'];
            } else {
              return null;
            }
          }
          return null;
        }).subscribe( (customData: any) => {
          console.log(customData);
       });
    }
 }

Deuxième approche utilise: 

this.router.events
.filter(event => event instanceof RoutesRecognized)
.map( (event: RoutesRecognized) => {
    return event.state.root.firstChild.data['custom_data'];
})
.subscribe(customData => {
    console.log(customData);
});

Remarque: Même si le dernier est plus court et fonctionne normalement, mais, si vous avez des routes imbriquées, il est conseillé d'utiliser le premier.

19
asmmahmud

son travail pour les composants qui ne naviguent pas (comme en-tête): 

this.route.root.firstChild.snapshot.data['title']

et complate exemple:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';


export class HeaderComponent implements OnInit {
  title: string;

  constructor(private route: ActivatedRoute, private router: Router ) { }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if(event instanceof NavigationEnd) {
        this.title = this.route.root.firstChild.snapshot.data['title']
      }
    });
  }    
}

cerdit à cette answare

6
izik f

Après avoir testé diverses solutions, la réponse du groupe d’appui angulaire a en réalité résolu ce problème.

ActivatedRoute ne porte pas de données , et voici la solution pour détecter la variable de page dans le data: { page: 'login' }.

import { Router, RoutesRecognized } from '@angular/router';

export class AppComponent {
  page = '';
  constructor(private router: Router) {
    // listen to page variable from router events
    router.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        let route = event.state.root.firstChild;
        this.page = 'page-' + route.data.page || '';
        console.log('Page', this.page);
      }
    });
  }
}
5
windmaomao

la réponse de asmmahmud fonctionne bien jusqu'à ce que Angular 5.x , mais 6.X casse le this.router.events puisque rxjs 6.x a des changements radicaux. Donc, je viens de trouver une mise à jour:

import {filter} from 'rxjs/operators';
import {map, mergeMap} from 'rxjs/internal/operators';

router.events
          .pipe(filter(event => event instanceof NavigationEnd),
            map(() => {
              let route = activatedRoute.firstChild;
              let child = route;
              while (child) {
                if (child.firstChild) {
                  child = child.firstChild;
                  route = child;
                } else {
                  child = null;
                }
              }
              return route;
            }),
            mergeMap(route => route.data)
          )
          .subscribe(data => {
            console.log(data);
          });
3
Vicky Gonsalves

Pour ceux qui utilisent maintenant Angular 6+ et le dernier RXJS 6, voici quelque chose basé sur les réponses précédentes: 

Exemple de routage: 

const routes: Routes = [
  {path: 'home', component: HomeComponent, data: {title: 'Home'}},
  // {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'login', component: LoginComponent, data: {title: 'Login'}},
  {path: 'dashboard', component: DashboardComponent, data: {title: 'Dashboard'}, canActivate: [AppAuthGuard]},
  {path: 'eventDetails', component: EventCardComponent, data: {title: 'Details'}},
  {path: '**', redirectTo: 'home', pathMatch: 'full'},
];

Comment obtenir l'exemple de titre: 

ngOnInit() {
    this.routerEventSubscription = this.router.events
      .pipe(filter(event => event instanceof RoutesRecognized))
      .pipe(map((event: RoutesRecognized) => {
        return event.state.root.firstChild.data['title'];
      })).subscribe(title => {
        this.title = title;
      });
  }
0
Jimmy Kane

Cela a fonctionné pour moi dans app.component.ts (ng 5) 

 constructor(
    private router: Router,
) {

 router.events.subscribe((routerEvent: Event) => {
       this.checkRouterEvent(routerEvent);
    });
}

checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof ActivationStart) {
        if (routerEvent.snapshot.data.custom_data) {
            this.currentpage = routerEvent.snapshot.data['custom_data'];
            console.log('4.' + this.currentpage);
        }

    }
0
FatGit