web-dev-qa-db-fra.com

Comment obtenir des données de route dans App Component dans Angular 2

J'ai défini certaines données de route dans mon module de routage d'application comme ci-dessous:

    const appRoutes:Routes = [
  {path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]

Je souhaite obtenir les données globalement et j'utilise app.component.ts pour obtenir les informations relatives à la redirection des URL, comme indiqué ci-dessous:

export class AppComponent {
  title = 'Welcome';
  constructor(public router: Router, public authenticationService: AuthenticationService) {
    this.router.events.subscribe(event => {
        console.log("Url",event.urlAfterRedirects);
        console.log("Page Name", router[PageName]); //Not working
      }

J'ai essayé d'injecter ActivatedRoute mais cela ne se met pas à jour après chaque redirection.

Y at-il quand même, où je peux configurer le nom de la page et l’obtenir dans le app.component.ts global.

javascriptangularangular-routing
6
user1188867

Essayez de filter et de boucler vos événements au lieu de subscribe

constructor(router:Router, route:ActivatedRoute) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .forEach(e => {
        this.title = route.root.firstChild.snapshot.data['PageName'];
    });
}

Veuillez vérifier la démo de travail suivante: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

17
Hristo Eftimov

Si vous aviez un routage statique à l'aide d'un objet routeur, comme ci-dessous:

{chemin: '', cheminMatch: 'complet', composant: NomComposant, données: {nomVariable: 'valeurValeur'}},

Sur ngOnInit (), vous pouvez utiliser l'objet ActivatedRoute pour récupérer les données que vous avez transmises à partir de la définition du routeur:

ngOnInit () { this.localVariable = this.route.snapshot.data ['NomVariable']; }

Obs: J'utilise Angular 5!

8
Pablo

Pour Angular 5+

Ce service récupère les données sur l'itinéraire actuel: (dans mon cas, "titre")

import { Injectable } from "@angular/core";
import { Router, ActivatedRouteSnapshot } from "@angular/router";

@Injectable()
export class AppRoutingService {

  constructor(private router: Router) { }

  public getRouteTitle(): string {
    return this.getRouteData("title");
  }

  private getRouteData(data: string): any {
    const root = this.router.routerState.snapshot.root;
    return this.lastChild(root).data[0][data];
  }

  private lastChild(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot {
    if (route.firstChild) {
      return this.lastChild(route.firstChild);
    } else {
      return route;
    }
  }
}

Logique des composants:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

// SERVICES
import { RouterService } from "../../shared/services/router.service";

@Component()
export class NavSubmenuComponent implements OnInit, OnDestroy {
  title: string = "";
  routerEvents: any;

  constructor(private router: Router, private routerService: RouterService) { }

  ngOnInit() {
    this.title = this.routerService.getRouteTitle();

    this.routerEvents = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(() => {
        this.title = this.routerService.getRouteTitle();
      });
  }

  ngOnDestroy() {
    this.routerEvents.unsubscribe();
  }
}
1
FaustmannChr

Si vous êtes prêt à attendre l'événement ngAfterViewInit, vous pouvez vous connecter à la prise du routeur à l'aide de viewchild.

c'est à dire.

  @ViewChild('router')
  private routerOutlet: RouterOutlet;

  ngAfterViewInit() {
    this.routerOutlet.activateEvents
      .pipe(
        map(() => this.routerOutlet
          .activatedRouteData
        )
      )
    .subscribe((data) => {
        // Code 
    });
  }


<router-outlet #router="outlet"></router-outlet>

0
andrebarata