Wie bekommt man Daten von der Route oder ActivatedRoute bei der Anmeldung an den router.Veranstaltungen.subscribe in Angular2?

Ich versuche, die Daten von einem Router, wenn sich die Route ändert, aber ich bin nicht mit Erfolg. Hier habe ich den asdf Eigenschaft

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    OverviewComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '' },
      { component: LoginComponent, path: 'login' },
      {
        children: [
          { path: '', pathMatch: 'full', redirectTo: 'overview', data: { asdf: 'hello' } },
          { component: OverviewComponent, path: 'overview', data: { asdf: 'hello' } },
        ], component: DashboardComponent,
        path: '',
      },
    ]),
  ],
})
export class AppModule { }

Und hier bekomme ich die URL vom router, wenn sich die route ändert, aber asdf ist nicht definiert 🙁

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute, NavigationEnd } from '@angular/router';
@Component({
  selector: 'cs-map',
  styleUrls: ['map.component.css'],
  templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit {
  private routerSub;

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

  public ngOnInit() {
    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        let url = val.url;
        console.log(this.activatedRoute.snapshot.data['asdf']); //data is defined but asdf is not :(
      }
    });
  }
}

Wie bekomme ich asdf's Wert?

Edit: ich bin mit der Navigation zu /overview

Ich denke, das ist ein bekanntes Problem. Können Sie versuchen, mit setTimeout(() => console.log(this.activatedRoute.snapshot.data['asdf']))?
leider hat es nicht funktioniert
Es gab eine ähnliche Frage heute, wo jemand schlug die Verwendung Observable.zip() mit this.activatedRoute.snapshot.data und this.router.events.
Meinst du diese?: github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/...
Genau . . . . . . .
Muss ich ersetzen Sie den router.Veranstaltungen.abonnieren mit Observable.zip? Ich bin mir nicht genau sicher, wie Sie Sie von hier aus gehen
Ich weiß es nicht. Ich habe gerade gesehen es erwähnt, auf eine ähnliche Frage. Ich bin nicht mit TS mich und keine tiefen Kenntnisse über observablen.
Np, danke tho 🙂

InformationsquelleAutor ilovelamp | 2016-11-17

angular angular-ui-router

13

Ohne während Schleife
```
constructor(private router: Router, 
        private activatedRoute: ActivatedRoute)
{

 this.router.events
        .filter(event => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map(route => route.firstChild)
        .switchMap(route => route.data)
        .map(data => data['asdf'])
}
```
- Ja @Tuizi kann dir nur erklären das dein code ?
- Für alle Veranstaltungen von router ich filter nur NavigationEnd Ereignis, dann habe ich die Karte dieses Ereignis, um die activatedRoute (weil ich Lesen möchte, den Wert von activatedRoute auf NavigationEnd). Ich anzeigen die activatedRoute zu den firstChild (erste Kinder erklärt mit RouterModule.forRoot()). Dann ein switchMap gemacht wird, um die Daten von dieser Strecke, eine switchMap, weil Daten zu beobachten. Schließlich habe ich die Karte data Objekt, um den Schlüssel, den ich will, in diesem Fall asdf
- Property 'filter' does not exist on type 'Observable<Event>' es ist wahrscheinlich, weil der Winkel 6 und rxjs 6 ändern. könnte Sie post aktualisiert-code?
- Scheint nicht zu funktionieren für aktivierte Routen-innen faul-Module geladen...
InformationsquelleAutor Tuizi

Folgenden wird aktualisiert, um die Arbeit mit rxjs v6

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

   this.router.events
        .pipe(
         filter(event => event instanceof NavigationEnd),
         map(() => this.activatedRoute),
         map(route => route.firstChild),
         switchMap(route => route.data),
         map(data => data['asdf']))
}

InformationsquelleAutor Neelavar

3

Hier ist ein modifiziertes Beispiel mit @Neelavar link Beispiel.

Er sieht zwar lang, aber es ist einfach, geduldig zu sein, wenn du dich durch es, es sollte funktionieren. Einfach die folgenden Schritte sollte ein paar Minuten dauern.

Vollständige Erklärung für mein setup, für Anfänger

Man sollte schon wissen, wie zum erstellen von Komponenten und setup-routing, kann ich nicht erklären, dass in die Tiefe.

1. Setup-Daten-Eigenschaft in Routen Array

Ihre Routen array (finden Sie diese entweder in app.- Modul.ts oder app-Routen.- Modul.ts oder in einigen Fällen Routen.ts - Datei).

Wenn Sie nicht finden können, diese, überprüfen Sie grundlegende routing-setup:
- Winkel-docs
- eine video-als auch

eine grundlegende setup ist alles, was Sie brauchen!

Fügen Sie die data-Eigenschaft so (Sie benötigen, um zu generieren, die home-Komponente):
```
export const routes: Routes = [
  { path: 'home', component: HomeComponent, data: {title: 'home'} },
  { path: '', pathMatch: 'full', redirectTo: '/home' },
];
```
2. Erstellen Sie eine Klasse

RouteData.ts, habe ich es in den gleichen Ordner Platz als app.- Modul.ts
```
export class RouteData {
  title: string;
}
```
Dies ist nur zum hinzufügen von Arten für die Verwendung des beobachtbaren, im Typoskript, die IDE kann dann AutoVervollständigen "title" oder "id" oder "animation" für mich, wenn ich hinzufügen, dass die Daten-Klasse höher.

3. Importieren Sie den folgenden in-app.Komponente.ts
```
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, switchMap } from 'rxjs/operators';
import { RouteData } from './route-data';
```
Dann über die Konstruktor code, deklarieren Sie die variable
```
routeData$: Observable<RouteData>;
```
Dann innerhalb der Konstruktor
```
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {}
```
4. Dann innerhalb ngOnInit
```
ngOnInit() {

    this.routeData$ = this.router.events.pipe(
      filter(routeEvent => routeEvent instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(activatedRoute => activatedRoute.firstChild),
      switchMap(firstChild => firstChild.data),
      map((data: RouteData) => data)
      );

  }
```
Erläuterung der code angepasst von @Tuizi link Beispiel Kommentar:
- Für jedes Ereignis, von der router-filter nur für die NavigationEnd Veranstaltung (wenn der router beendet die navigation).
- Dann anzeigen (return) der derzeit activatedRoute.
- Karte der activatedRoute die firstChild (Das erste Kind dieser route in den router-Status-Baum).
- Dann ein switchMap gibt die Daten von dieser route, verwenden eine switchMap, weil jedes "data", die ausgegeben wird, ist eine observable, die Karte wechseln, wird das Abbrechen der alten beobachtbar, wenn ein neues emittiert wird, spart Speicher.
- Anzeigen (return) - Daten-Objekt, weisen Sie ihm eine Art von RouteData.
- Schließlich können Sie das Beobachtbare in eine Vorlage mit async-Rohr
```
    <span *ngIf="routeData$ | async as routeData">
        {{ routeData.title | titlecase }}
      </span>
```
*Hinweis: "async " als" Pausen-Typ Check-in die Vorlage im moment 🙁

github issue

InformationsquelleAutor Tayamba Mwanza
0

Daten in den Routen muss ein array von Objekten, anstatt nur Objekt so definieren Sie wie folgt
```
{ component: LoginComponent, path: 'login', data:[{myKey1: myValue1}] },
```
Nun, um es abzurufen, verwenden Sie diesen code in Ihre Komponenten Konstruktor
```
constructor(private router:Router, private activeRoute:ActivatedRoute) {

  router.events
    .filter(event => event instanceof NavigationEnd)
    .map(_ => this.router.routerState.root)
    .map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
    })
  .flatMap(route => route.data)
  .subscribe(data => {
    console.log(data[0].myKey1);

    });

}
```
- Dies ist nicht das, was das interface vor:
- export declare type Data = { [name: string]: any; };
- es dosent vorschlagen, da es sonst zu es bedeutet Data die alias data ist der Typ any werden kann ein array auch. aber wenn Sie sich an den router.Ereignisse und überprüfen Sie auf die Art, die Sie sehen, dass es eine arraay
InformationsquelleAutor Mrinmoy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Vollständige Erklärung für mein setup, für Anfänger

Man sollte schon wissen, wie zum erstellen von Komponenten und setup-routing, kann ich nicht erklären, dass in die Tiefe.

1. Setup-Daten-Eigenschaft in Routen Array

Fügen Sie die data-Eigenschaft so (Sie benötigen, um zu generieren, die home-Komponente):

2. Erstellen Sie eine Klasse

3. Importieren Sie den folgenden in-app.Komponente.ts

4. Dann innerhalb ngOnInit