Wie man aktuelle route, benutzerdefinierte Daten im Winkel 2?

Habe ich Routen einrichten ist wie unten

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'
  },
];

nun, wenn ich komme, um '/list' route dann auf 'listing.component.ts' ich geschrieben habe folgenden code

export class ListingComponent {

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

  }
}

Sieht aus wie ein dup von stackoverflow.com/questions/38644314/...

InformationsquelleAutor Rituraj ratan | 2016-11-29

angular angular2-routing

11
```
  public constructor(private route:ActivatedRoute, private router:Router) {
      console.log(route.snapshot.data['title']);
  }
```
das problem ist, dass diese route nicht notwendig, die endgültige route, es ist eine geschachtelte Struktur. Es hängt wirklich davon ab, wo Sie das Stück, dann sind Sie gerade spielen Ihr Glück hier.
Dies wird nicht immer die richtigen Ergebnisse, wie es hängt davon ab, wo Sie sind, indem Sie es.
Recht, wenn Sie nicht fügen Sie die Komponente, die Hinzugefügt wurde über die aktuelle route, die Sie benötigen, um den router Durchlaufen Baum, um die gewünschte segment zu können auf die Daten zugreifen.

InformationsquelleAutor Günter Zöchbauer

Für Eckige 4+

Wenn Sie den folgenden code in der übergeordneten oder oberen level-Komponenten wie AppComponent dann wird es nicht funktionieren. Es funktioniert nur mit Kind oder unteren level-Komponenten, für die Sie definiert haben, wird die route von benutzerdefinierten Daten:

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

Also, wenn Sie wollen, um auf die route von benutzerdefinierten Daten Global von einer übergeordneten oder oberen Ebene Komponente, um den Zugriff auf die änderung der route, benutzerdefinierte Daten, dann haben Sie zu hören-router Veranstaltungen besonders RoutesRecognized oder NavigationEnd Veranstaltungen. Ich bin gonna zeigen zwei Verfahren mit AppComponent mit zwei Veranstaltungen:

Erster Ansatz:

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

Zweite Ansatz ist die Nutzung von:

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

Hinweis: obwohl Letzte ist kürzer und in der Regel funktioniert, aber, wenn Sie verschachtelte Routen, dann ist es ermutigt, die erste.

Toll, dein Erster Ansatz sehr geholfen. Danke!!! Für die anderen: Sie importieren aus "rxjs/add/Betreiber/filter" und "rxjs/add/Betreiber/Karte", damit es funktioniert

InformationsquelleAutor asmmahmud

seine Arbeit für die Komponente, die nicht mehr navigieren (wie header) :

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

und komplette Beispiel:

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 dieser answare

InformationsquelleAutor izik f

Nachdem ich getestet verschiedenen Lösung, die Winkelgeschwindigkeit Selbsthilfegruppe Antwort eigentlich dieses problem gelöst schön.

ActivatedRoute nicht tragen Daten, und hier ist die Lösung für die Erfassung der Seite variable im 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);
      }
    });
  }
}

Danke @windmaomao - basierend auf Ihre Antwort, ich war in der Lage zu beantworten die gleiche Frage in Bezug auf die Winkel-6: stackoverflow.com/questions/50912789/...
Dies funktioniert nicht für untergeordnete Routen.

InformationsquelleAutor windmaomao

asmmahmud Antwort funktioniert gut, bis Winkel-5.x
aber 6.X bricht die this.router.events seit rxjs 6.x hat wichtige änderungen. So kam gerade über ein update:

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

InformationsquelleAutor Vicky Gonsalves

Dieser arbeitete für mich in der app.Komponente.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);
        }

    }

Super!!! Es ist hier zu arbeiten! Danke! Ein Zweifel, wie bekomme ich die Daten, wenn ich Zugang direkt im router?

InformationsquelleAutor FatGit

Für diejenigen, die jetzt mit Eckigen 6+ und die neuesten RXJS 6 hier ist etwas, was sich auf die ansers oben:

Routing Beispiel:

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'},
];

Wie man dem Titel Beispiel:

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

InformationsquelleAutor Jimmy Kane

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.