Comment obtenir l'Itinéraire de données en Application de la Composante Angulaire 2

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

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

Je veux obtenir les données à l'échelle mondiale afin que je puisse utiliser appRoutes dans l'app.composante.ts pour obtenir l'URL de redirection de l'information connexe comme 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 il n'est pas mis à jour après chaque redirection.

Est-il de toute façon, où je peux configurer le nom de la page et le faire dans global app.component.ts.

OriginalL'auteur user1188867 | 2017-04-20

  1. 20

    Essayer de filter et boucle de 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 les points suivants de travail de démonstration: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

    J'ai ajouté le code ci-dessus à mon application.composante.ts . Je suis l'obtention de la valeur undefined.
    Pouvez-vous créer un plunker? Il est difficile de vous aider comme ça. Comme vous le voyez mon travail démo fonctionne, donc nous sommes très proches de résoudre votre problème 🙂
    Je prie de m'excuser Son d'un gros projet avec plusieurs modules, je ne peux pas créer plunker.
    ok, je comprends 🙂 Maintenant, je vois une petite différence entre mon exemple et votre code. Dans le parcours de tableau pour la data propriété à l'aide d'un tableau: data:[{PageName:"Login Page"}] Pouvez-vous essayer mon exemple avec un objet: data:{PageName:"Login Page"}. Peut-être pour cela, vous recevez undefined.
    Grâce Eftimov, Il a travaillé 🙂 j'ai changé de tableau à l'objet, et depuis que j'ai plusieurs modules dans le projet, j'ai ajouter un peu plus de code comme ci-dessous : var pageName = route.de la racine.firstChild.de l'instantané.data['trackPageName']; if(!pageName) pageName = route.de la racine.firstChild.de l'instantané.firstChild.data['trackPageName'];

    OriginalL'auteur Hristo Eftimov

  2. 9

    Si vous aviez statiquement routés à l'aide du Routeur objet comme ci-dessous:

    { path: ", pathMatch: "full", le composant: NameComponent, data: { variableName: 'variableValue' } },

    Sur ngOnInit (), vous pouvez utiliser ActivatedRoute objet de récupérer les données que vous avez passé de Routeur définition:

    ngOnInit() {
    c'.localVariable = ce.l'itinéraire.de l'instantané.data['variableName'];
    }

    Obs: je suis en utilisant Angulaire 5!

    c'.la route est en instance de quoi?
    pouvez-vous poster un stackblitz lien?
    meilleure réponse par ici!
    la route est ActivatedRoute de @angulaire/routeur
    Cette approche fonctionne pour les composants qui font partie de l'itinéraire composant de routage. Cette approche ne pas travail au sein de la racine de l'application composant lui-même. lorsque ngOnInit est appelé la racine de l'application composant comme demandé, snapshot.data est un objet vide.

    OriginalL'auteur Pablo

  3. 1

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

    Composant Logique:

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

    OriginalL'auteur FaustmannChr

  4. -1
    export class AppComponent implements OnInit, OnDestroy{
  title = 'Welcome';
  private paramsSubscription;

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


public ngOnInit() {
     this.paramsSubscription = this.activatedRoute.params
      .subscribe((params) => {
        console.log("Page Name", params['PageName']);
      }        
 }

//Unsubscribe route params to avoid memmory leaks
public ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
 }
    Sa ne fonctionne pas et n'est pas appelé pour chaque itinéraire

    OriginalL'auteur sainu