Eckige ActivatedRoute Daten liefert ein leeres Objekt

Habe ich eine route eingetragen mit einigen Daten:

const routes: Routes = 
[
    {path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];

und ich versuche, auf der Strecke ist-Daten mit ActivatedRoute:

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

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); //this is returning an empty object {}
    });
  }
}

aber für einige Gründe, warum data ist ein leeres Objekt.

Wie dieses problem zu lösen?

InformationsquelleAutor Francesco Borzi | 2017-08-17
  1. 61

    Edit: das problem ist, dass ich versuchen auf die ActivatedRoute aus einer Komponente, die außerhalb die <router-outlet>. So wie es aussieht, dass dies ist das beabsichtigte Verhalten.

    Aber ich denke immer noch, dass meine Antwort unten kann nützlich sein, um jeden, der versucht zu erreichen, die gleiche Sache.

    Ich fand einen workaround auf GitHub (Dank manklu), die ich verwendet, um zu erreichen, was ich brauchte:

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

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((data) => {
      if (data instanceof RoutesRecognized) {
        this.routeData = data.state.root.firstChild.data;
      }
    });
  }
}

    tut diese Weise this.routeData halten wird die route, die Daten, die ich brauchte (in meinem Fall die Seite title).

    • Hey, wo ist dein github-link? Ich fand nur diese bug report: github.com/angular/angular/issues/19420 🙂
    • Ich kann mich nicht erinnern,
    • Vielen, vielen Dank!
    • Danke für die Erklärung. Ich war nur das aufrufen einer bestimmten Komponente über app.component.html - nicht die <router-outlet></router-outlet>. Prost!
    • kämpfte mit diesem für eine Weile, deine Lösung funktionierte perfekt. Dank
    • Wenn Sie möchten, um url-params statt eigene Daten verwenden Sie diese: this.router.events.subscribe(val => { if (val instanceof RoutesRecognized) { var strId = val.state.root.firstChild.params["id"]; }});
    • Für diejenigen, die mit Daten, die verschachtelt ist tiefer, ist diese Antwort für mich gearbeitet: stackoverflow.com/a/49632700/64279

    InformationsquelleAutor Francesco Borzi
  2. 3

    Ich weiß nicht, die version gesprochen, aber als der Winkel 6,
    dieser arbeitete für mich:

    (Natürlich Dank shinDath)

      routeData;
  ngOnInit() {
    //child route param doesnt go up to parent route params.
    this.router.events.subscribe((val) => {
      if (val instanceof ActivationEnd) {
        if(!$.isEmptyObject(val.snapshot.params)){
          this.routeData = val.snapshot.params;
        }
      }
    });
  }
    • Die Daten, die der OP wurde versucht, zu erhalten, war das definiert man in der route-Konfiguration. Dies ist nicht das, was gefragt ist
    InformationsquelleAutor Blazzze IL
  3. 0

    Dies ist ein Teil von meinem code (HINWEIS: ich bin mit Winkel 8):

    constructor(private _router: Router, private _route: ActivatedRoute) {}

ngOnInit() {
  ...
  this.listenRouting();
}

listenRouting() {
    this._router.events.subscribe((router: any) => {
      routerUrl = router.url;
      if (routerUrl && typeof routerUrl === 'string') {
        routerList = routerUrl.slice(1).split('/');
        console.log("data.breadcrumbs", this._route.snapshot.routeConfig.children.find(child => child.path === routerList[routerList.length - 1]).data.breadcrumbs);
        ...
      }
    });
}

    So Daten ist "versteckt" unter ActivatedRoute.snapshot.routeConfig.Kinder-Array. Jedes Kind enthält, unter anderem, Daten.
    In meinem Fall Daten konfiguriert ist, routing.Modul, z.B.:

    const routes: Routes = [
  { path: "facility-datas",
    component: FacilityTerminal,
    data: {
      breadcrumbs: "b ft"
    }
  },
...
];
    InformationsquelleAutor Josip
  4. -3

    Unten sollte funktionieren:

    constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.data);
}
    • leider nicht 🙁
    InformationsquelleAutor Rohit Ramname
Schreibe einen Kommentar